我目前正在开发一个网站,我正在尝试进行更多的 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到页面。
最佳答案
只要您没有任何具体问题,我建议您使用现有的可能教程之一。例如,可能是最著名的一个: Suckerfish 强>!这是一个完美的开始。
或者也许 this也可以帮助你。
最后,这是一个关于如何创建一个漂亮的教程 CSS3-Dropdown .
此外,CSS 下拉菜单已在 Stackoverflow 上多次讨论。
关于Css - 导航菜单 <Ul> - 子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11672622/