Menu desplegable

[alexisulloacastro]

Hola amigos, este es mi primer post en el foro.
Estoy comenzando a utilizar css ya que el flash no lo es todo...
Tengo un sitio web con una barra de menu, pero ahora necesito agregar un desplegable desplegable, solo a un item de la barra, he intentado de todas las maneras que he encontrado en la web y no me funciona o el resto de los menús desaparecen :(

Adjunto el html de la barra de menu original, sin desplegable.

<div id="nav">
<ul class="links" id="primarylinks">
<li class="menu-1 first"><a href="quienes.htm" title="">Quienes Somos</a></li>
<li class="menu-2"><a href="descubre.htm" title="">Descubre Valparaiso</a></li>
<li class="menu-3"><a href="paquetes.htm" title="">Paquetes Turisticos</a></li>
<li class="menu-4"><a href="cosas.htm" title="">Cosas que Hacer</a></li>
<li class="menu-5"><a href="festivales.htm" title="">Festivales &amp; Eventos</a></li>
<li class="menu-6"><a href="arte.htm" title="">Arte &amp; Cultura</a></li>
<li class="menu-7"><a href="contacto.htm" title="">Contacto</a></li>
</ul></div>

Ahora el CSS


#nav{
clear:both;
height:45px;
overflow:hidden;
background-image:url(img/nav_bg.gif);
background-repeat:repeat-x;background-position:center top;
margin-bottom:auto;
padding-top:3px;
width: 968px;
margin-left: 16px;
}

#primarylinks{width:971px;
margin:0 auto;
margin-left: -36px;}
#primarylinks li{float:left;margin:0;padding:0;border-right:1px solid #51483f;}
#primarylinks li.first{border-left:1px solid #51483f;}
#primarylinks li.menu-1 a{width:135px;background:url(img/quienes.gif) no-repeat center top;}
#primarylinks li.menu-2 a{width:160px;background:url(img/descubre.gif) no-repeat center top;}
#primarylinks li.menu-3 a{width:160px;background:url(img/paquetes.gif) no-repeat center top;}
#primarylinks li.menu-4 a{width:132px;background:url(img/cosas.gif) no-repeat center top;}
#primarylinks li.menu-5 a{width:160px;background:url(img/festivales.gif) no-repeat center top;}
#primarylinks li.menu-6 a{width:117px;background:url(img/arte.gif) no-repeat center top;}
#primarylinks li.menu-7 a{width:87px;background:url(img/contacto.gif) no-repeat center top;}
#primarylinks li a{display:block;padding-top:80px;height:48px;overflow:hidden;font-family:Tahoma,'Trebuchet MS',arial,sans-serif;text-transform:uppercase;font-size:10px;letter-spacing:0.03em;text-align:center;color:#f1ead6;text-decoration:none;}
#primarylinks li a:hover,
#primarylinks li a:active,
#primarylinks li a.active{background-position:center -48px;}

Como puedo incluir un desplegable que mantenga la gráfica y diseño que tengo
Agradeceré que me puedan ayudar con esto.

Saludos
Alexis

[User_Kathy]

Te voy a pasar mi menu desplegable =D te parece?

[User_Kathy]

Código:

/******************************************* estilos del menu CSS


/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 875; /*For KHTML*/
  list-style: none;
  height: 24px;
}

ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-h ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu-h a {
  border: 1px solid #99CCCC;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #336699;
  color: #FFFFFF;
  font: bold 10px/22px Arial;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background: #99CCFF;
  color: #FFFFFF;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background: #336699;
  color: #FFFFFF;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background: #99CCFF;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
  background: #336699;
  color: #FFFFFF;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
  background: #99CCFF;
  color: #FFFFFF;
}

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
	background: #336699;
	color: #FFFFFF;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
  	background: #99CCFF;
  	color: #FFF;
}

ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}

ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}


body {
margin: 0;
padding: 0px;
background: #FFF;
color: #666;
text-align: center;
}

h1 {
font: bold 16px, Arial;
}

.p {
margin: 15px 0;
font: 11px/1.5em;
	font-family:arial;
}

.a {
color: #900;
text-decoration: underline;

}

a:hover {
background: #900;
color: #FFF;
text-decoration: none;
}

.hr {
margin: 24px 0;
_margin: 0; /*IE Sucks*/
clear: both;
}

#page-container {
margin: 0 auto;
width: 900px;
text-align: left;
}
<!--*************************************php-->
<!--*********************item1***************-->
<div id="page-container" style="background-color:#336699">

<ul id="navmenu-h" >
<? echo $Ocultar[1];?>
<li>
	<a href="#" onclick="xxx.php">Inicio</a>
</li>
<!--*********************item2***************-->
<li>
	<a href="#">Visitas</a>
    <ul>
    	<li>
           <a href="#" onclick="xxx.php">Registrar Nueva</a> 
        </li>
    	<li>
          <a href="#" onclick="xxx.php">Registrar Salida</a> 
        </li>
         <li>
          <a href="#" onclick="xxx.php">Consultas</a> 
        </li>
	 
    </ul>
</li>
</div>

Espero que te sirva de algo a mi me funciona a la perfección =D

[alexisulloacastro]

Kathy,
Gracias, lo probaré y te cuento como me va

Saludos

[KurozakiIchigo]

<? echo $Ocultar[1];?>

has usado PHP :(
recuerda que no todos los hosting ejecutan PHP, pero esta buena la ayuda.
En fin no ayudamos a aprender a nuestro compañero, pero pues bien, le hara sus modificaciones como quiere a su web. =)

[C2am]

En www.araudi.net tienes varios ejemplos

[alexisulloacastro]

KurozakiIchigo
Php conozco lo básico, aunque la web que estoy haciendo está en html.
Agradecería me puedan guiar, en lo que tendría que efectuar en el código que ya tengo, que es lo entiendo, para agregar la opción de desplegable en un solo ítem, no en todos los menús.
Así puedo entender la mecánica y probar otras variantes.

Saludos y gracias

[oskarvisual]

Prueba con esta web, http://cssmenumaker.com/ ya te da varios modelos solo tienes que crear los item y te da la opción de descargar...