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

【问题标题】：Css - Navigation menu <Ul> - Sub MenusCss - 导航菜单 <Ul> - 子菜单
【发布时间】：2012-07-26 15:23:11
【问题描述】：

我目前正在开发一个网站，我正在尝试更多的 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 到页面。

【问题讨论】：

欢迎来到 StackOverflow。页面的链接在哪里？

标签： css menu navigation html-lists nav

【解决方案1】：

只要您没有任何具体问题，我建议您使用其中一个可能的教程。例如可能最著名的一个：Suckerfish！这是一个完美的开始。
或者this 也可以帮助你。

最后，这里有一个关于如何创建一个漂亮的CSS3-Dropdown 的教程。

CSS-Dropdown 菜单也曾在 Stackoverflow 上多次讨论过。

【讨论】：

我不能真正使用互联网上普通类型的教程，因为它需要包含背景图片。
@Sean 没关系，机制完全一样。尝试其中一些链接教程，如果您在某个时候遇到困难，请询问有关此问题的具体问题，我相信会有很多人愿意提供帮助。您的问题/问题越清楚，您得到的答案就越好。

【解决方案2】：

这样做的方法，首先，你必须像这样设置父元素相对

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

然后将子元素设置在父元素之下（并使其隐藏）（20 px 是任意的）

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

然后让子菜单在悬停时可见

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

另外，我建议将您当前的 li 样式更改为 #navbar>ul>li，因为 li css 也会影响所有子菜单

请注意 > 运算符，~~很多旧导航器~~ IE6 和 IE5 不支持它，如果这很重要，请使用：

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

和样式：

li.lvl1{...

【讨论】：