CSS - Menú de navegación - Sub Menús

Question

Actualmente estoy desarrollando un sitio y estoy tratando de ingresar a más codificación de CSS, he realizado el CSS básico para la navegación realizada.Aunque lo que quiero hacer ahora es hacer submenús, así que cuando aparece sobre uno de los botones aparecen los menús.

Aquí está mi CSS actual: Código HTML:

/*Naviagtion Bar Css */
ul {
    margin: 0;
    padding: 0;
    list-style:none;
}
li {
padding-top:5px;
color: #FFF;
width:120px;
float: left;
margin: 0;
padding: 0;
}
li a {
    display: block;
    width: 120px;
    height: 30px;
    padding-top:20px;
}
#homepage a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#homepage_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#homepage a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}

#guide a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#guide_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#guide a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}

#blog a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#blog_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#blog a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}

#media a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#media_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#media a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}

#forum a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#forum_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#forum a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}
#navbar {
    position:relative;
    top:5px;
    float:left;
    margin-top:30px;
    margin-left:45px;
    width:600px;
    height: 50px;
    z-index:-1;
}

Código HTML:

<div id="navbar" style="display: inline-block;">
<ul>
   <li id="homepage_current"><a><strong>Home</strong></a></li>
   <li id="guide"><a><strong>Guide</strong></a>
      <ul>
         <li> Sub Menu 1 </li>
         <li> Sub Menu 2 </li>
         <li> Sub Menu 3 </li>
      </ul>
   </li>
   <li id="blog"><a><strong>Blog</strong></a></li>
   <li id="media"><a><strong>Media</strong></a></li>
   <li id="forum"><a><strong>Forums</strong></a></li>
</ul>
</div>

Cualquier ayuda sería apreciada. Aquí hay un enlace a la página.

Answer 1

La forma de hacerlo, primero, debe configurar el elemento padre relativo como este

#navbar>ul>li{position:relative;}

Luego, configure el elemento secundario para estar debajo del padre (y hágalo oculto) (20 px es arbitrario)

#navbar>ul>li>ul{position:absolute;top:20px;left:0px; display:none;}

Luego haz que el submenú sea visible en Hover

#navbar>ul>li:hover>ul{display:block;}

Además, sugeriría cambiar su estilo actual para Li a #Navbar> UL> Li, ya que el LI CSS también afectará a todos los submenú

y tenga cuidado con el> operador, no es compatible con una lote de Lote de navegador antiguo IE6 e IE5, si es importante, use:

<li id="guide" class="lvl1"><a><strong>Guide</strong></a>

y estilo con:

li.lvl1{...

Answer 2

Mientras no tenga ningún problema específico, le sugiero uno de los tutoriales de mayo que están ahí fuera.Por ejemplo, probablemente el más famoso: suckerfish !Es un comienzo perfecto.
O quizás este también podría ayudarlo.

Finalmente, aquí hay un tutorial sobre cómo crear un agradable css3-desplegown .

También se han hablado de menús de CSS-desplegown varias veces aquí en StackOverflow.