ósea tu quieres un menú desplegable el cual en cada sup sección el menú se encoja y se desplace hacia abajo, esto es algo fácil de hacer entre comillas si conoces esta siguiente técnica.
en el html devez tener algo asi
<div id='menu'>
<div id='cat'>
<ul class='sf-menu'>
<li>
<a href='#' title='#'>sin sub categoria</a>
</li>
<li>
<a href='#' title='#'>con sub categoria</a>
<ul class='children'>
<li>
<a href='#' title='#'>sin sub-sub categoria</a>
</li>
<li>
<a href='#' title='#'>con sub-sub categoria</a>
<ul>
<li>
<a href='#' title='#'>categoria final</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
y en el css algo asi (al final explico como editarlo relax xD)
#menu { float: left ; margin-bottom:0px ; width:1000px ; line-height: 1.0 ; height:30px ; background:#060d18 }
#menu p { color: #668790}
#menu li { border-right: 1px solid #122B41 ; float:left ; list-style:none ; background: #060D18 ; padding: 0px 0px }
#menu a { color: #6CA7C7 ; text-decoration:none ; padding: 8px 15px }
#menu a:link { }
#menu a:visited { }
#menu a:hover { color:#d9dfe0 ; background: url(objetos/menu.png) repeat-x }
#menu a:active { }
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 30px; /* match top ul list item height */
z-index: 150;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 5em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 5em; /* match ul width */
top: 0;
}
Muy bien una vez escrito esto empiezo a explicar cada detalle de como editarlo
el html no es nada del otro mundo solo es un menú normal con sub secciones en el cual para cada nuevo nivel solo se debe colocar un ul entre un par de li
ahora el css se que se ve sumamente complicado pero no lo es solo es repetitivo.
Empezaremos con estas línea
#menu { float: left ; margin-bottom:0px ; width:1000px ; line-height: 1.0 ; height:30px ; background:#060d18 }
#menu p { color: #668790}
#menu li { border-right: 1px solid #122B41 ; float:left ; list-style:none ; background: #060D18 ; padding: 0px 0px }
#menu a { color: #6CA7C7 ; text-decoration:none ; padding: 8px 15px }
#menu a:link { }
#menu a:visited { }
#menu a:hover { color:#d9dfe0 ; background: url(objetos/menu.png) repeat-x }
#menu a:active { }
si te fijas no son mas que diseños para la capa menú y lo que aparece en ellas como por ejemplo márgenes fondos etc, esta parte la obvio ya que repetiría lo que sale en el curso paso a paso. (si quieres lo explico)
Ahora lo demás como dije es repetitivo, a lo que me refiero es que repite los nombre de li y ul para indicar que pasa cuando un ul esta dentro de un li y cuando un ul esta dentro de un li y ese li esta dentro de otro li mas, ahora expliquemos esta parte es el ul sin ningún li ósea la primera sección sin desplegable, de verdad sugiero no editar esta parte la razón es que no veremos cambios relevantes en el diseño.
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
Lo siguiente es el primer desplegable
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 30px; /* match top ul list item height */
z-index: 150;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
left: 0;
top: -999em;
}
como notamos es mas corto pero para editarlo no es mas que cambiar 2 factores el cual es el left y el top, si queremos que salga a la derecha solo debemos borrar lo que sale en el ltop y poner una cantidad en el left, esto ara que cada menú se alinie uno al lado del otro.
Ahora lo demás si nos fijamos es lo mismo que lo que tenemos aquí solo que se le agrega esto al nombre
.sf-menu li li:hover ul, lo que indica que es el diseño para un li dentro de otro li y después un ul y el siguiente es para una cuarta sección donde seria un li dentro de otro li y ese dentro de otro.
.sf-menu li li li:hover ul,
Esto es todo por los momentos cualquier otra duda o aclaración solo pregunta.
