Problema con menu vertical acordion

[hmm_mcma]

Hola a todos. Tengo muy poca experiencia con CSS y javascript por lo que les pido disculpa de antemano si comento algo obvio. El problema que tengo es el siguiente: el TEXTO de las opciones del menú se superponen a la imagen del signo + (más) o el signo - (menos). ¿qué puede estar pasando? Alguna idea por favor.

Tengo los archivos para mostrarles lo que sucede (.html .css .js y .gif) compactado en un archivo .rar pero editando el tema no veo cómo subirlo. Guíenme por favor soy novato en esto.

[pzin]

Bienvenido a FdW.

Puedes pegar el código que estás usando, HTML y CSS debería de servir, entre las etiquetas que se generan al elegir el lenguaje en highlight.

[hmm_mcma]

Este es el CSS:

Código CSS:

#divAccNestedDiv_main{
  min-width:480px;
  width:100%;
  height:101%;
  background:#fff;
  color:#333;
  font:76%/1.6 verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
  text-align:left;
 
  margin-right:19em;
  position:relative;
  min-height:0;
 
  padding:0 0 1em;
 
  border-top:0.1em solid #ccc;
  overflow:hidden
}
 
#divAccNestedList_1{
  min-width:480px;
  height:101%;
  background:#fff;
  font:76%/1.6 verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
 
  display:inline;
  width:18em;
  padding-bottom:1.3em;
  position:relative;
  color:#e3e3e3;
  overflow:hidden;
 
  text-align:left;
 
  margin-bottom:30px;
  padding:10px 2.5%;
  border-top:0.1em solid #ccc
}
 
#divAccNestedDiv_main p {margin: 0 10px 1em}
#divAccNestedDiv_main img{border:0 none}
#divAccNestedList_1 p {margin: 0 10px 1em}
#divAccNestedList_1 img{border:0 none}
.strong{font-weight:700}
.clear {clear:both}
 
/* --- Headings --- */
#divAccNestedDiv_main h1, #divAccNestedDiv_main h2, #divAccNestedDiv_main h3 {margin-bottom:1em}
#divAccNestedDiv_main h2, #divAccNestedDiv_main h3, #divAccNestedDiv_main h4 a, #divAccNestedDiv_main h5 a {padding:3px 20px}
#divAccNestedDiv_main h2, #divAccNestedDiv_main h3, #divAccNestedDiv_main h4, #divAccNestedDiv_main h5 {font-size:1em}
#divAccNestedDiv_main h2 {background-color:#f0f0f0}
 
#divAccNestedList_1 h1, #divAccNestedList_1 h2, #divAccNestedList_1 h3 {margin-bottom:1em}
#divAccNestedList_1 h2, #divAccNestedList_1 h3, #divAccNestedList_1 h4 a, #divAccNestedList_1 h5 a {padding:3px 20px}
#divAccNestedList_1 h2, #divAccNestedList_1 h3, #divAccNestedList_1 h4, #divAccNestedList_1 h5 {font-size:1em}
#divAccNestedList_1, #divAccNestedList_1 h2, #divAccNestedList_1 h3 {background:#000; color:#e3e3e3}
#divAccNestedList_1 h2 {border-bottom:1px solid #484b51}
 
/* --- Links --- */
#divAccNestedList_1 a {padding:1px; border:1px solid #e0e0e0; color:#05b; display:block; border-width:0 0 1px; border-color:#445; color:#f0f0f0}
 
#divAccNestedList_1 a:hover, #divAccNestedList_1 a:active, #divAccNestedList_1 a:focus {border-color:#bcd; text-decoration:none; outline:0 none; background-color:#334}
 
 
/* --- Accordion --- */
.js #divAccNestedDiv_main .accordion {visibility:hidden}
 
.js #divAccNestedList_1 .accordion {display:none}
 
.accordion {margin:0; padding:0 10px}
 
.accordion li {list-style-type:none}
 
.accordion li.last-child {margin-left:19px; list-style-type:disc}
 
#divAccNestedList_1 ul.accordion ul {margin:0; padding:0 0 0 20px;}
 
.accordion .outer {border:1px solid #dadada; border-width:0 1px 1px; background: #fff}
 
.accordion .inner {margin-bottom:0; padding:.5em 20px 1em; position:relative; overflow:hidden}
 
.accordion .inner .inner {padding-bottom:0}
 
.accordion .h {padding-top:.3em} /* vertical padding instead of vertical margin (ie8) */
 
.accordion p {margin:.5em 1px 1em}
 
a.trigger {padding-left:20px; background-image: url(plus.gif); background-repeat: no-repeat; background-position: 1px 50%;  font-weight:700}
 
a.trigger.open {background-image: url(minus.gif)}
 
.last-child a.trigger{padding-left:1px; background-image:none; font-weight:normal}
 
#divAccNestedDiv_main a.trigger {background-color:#f0f0f0}
 
#divAccNestedDiv_main a.trigger.open {border-color:#dadada; background-color:#e7e7e7}
 
#divAccNestedDiv_main a:hover.trigger.open, #divAccNestedDiv_main a:focus.trigger.open, #divAccNestedDiv_main a:active.trigger.open {border-color:#bcd}
 
#divAccNestedList_1 a.active{font-weight:700; color:#f72; text-decoration:none}
 

Este es el HTML:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
    <title>Prueba Menú Vertical Acordion</title>
 
    <link rel="stylesheet"  href="nested_accordion.css"  type="text/css" />
 
    <!--[if lte IE 6]>
        <style type='text/css'>
            * html #divAccNestedDiv_main, #divAccNestedList_1 a, a.trigger, .accordion .inner {height:1%}
            #lenta{height:52px}
        </style>
    
        <script type="text/javascript">
            try { document.execCommand( "BackgroundImageCache", false, true); } catch(e) {};
        </script>
    <![endif]-->
 
    <!--[if lte IE 7]>
        <style type="text/css">
            .accordion .inner {position:static; overflow:visible}
        </style>
    <![endif]-->
    
    <!--[if !lt IE 6]><!-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.nestedAccordion.js"></script>
        <script type="text/javascript">
            <!--//--><![CDATA[//><!--
            $("html").addClass("js");
                $.fn.accordion.defaults.container = false;
                $(function() {
                    $("#divAccNestedList_1").accordion({initShow : "#divAccNestedList_1"});
                    $("html").removeClass("js");
                });
            //--><!]]>
        </script>
    <!--<![endif]-->
 
</head>
 
<body>
    <table>
        <tbody>
            <tr>
                <td align="left" valign="middle" >
                    <div id="divAccNestedList_1">
                        <h2>Categorías</h2>
                        <ul id="AccNestedList_1" class="accordion">
                            <li><a href="#" >Confecciones</a>
                                <ul>
                                    <li><a href="#" >para senores</a></li>
                                    <li><a href="#" >para ninos</a></li>
                                    <li><a href="#" >para ninas</a></li>
                                </ul>
                            </li>
                            <li><a href="#" >Accesorios</a>
                                <ul>
                                    <li><a href="#" >para moviles</a>
                                        <ul>
                                            <li><a href="#" >pantallas</a></li>
                                            <li><a href="#" >teclados</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#" >para ordenadores</a>
                                        <ul>
                                            <li><a href="#" >fuentes</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>