Css -导航菜单<Ul> -子菜单

Question

我目前正在开发一个网站，我正在尝试进入更多的css编码，我已经为导航做了基本的css。虽然我现在想做的是创建子菜单，所以当你将鼠标移到其中一个按钮上时，菜单就会出现。

这是我当前的Css: 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;
}

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>

任何帮助都将不胜感激。页面的Here's a link。

Answer 1

只要你没有任何特别的问题，我推荐你一个五月份的教程。例如，可能是最著名的一个：！这是一个完美的开始。

或者，也许this也可以帮助您。

最后，这里是关于如何创建一个不错的CSS3-Dropdown的教程。

此外，CSS-下拉菜单在Stackoverflow上也被多次提及。