我刚加入Stack溢出,我希望有人能帮我找到横向菜单的解决方案。 我的子菜单似乎扩展了父div,而不是在它上面显示。这是我的codes。
HTML代码:
<div id="menu">
<ul>
<li><a id="" class="" href="">Home</a></li>
<li><a id="" class="" href="">About Me</a>
<ul class="sub-menu">
<li><a href="">Biography</a></li>
<li><a href="">Photo Galery</a></li>
<li><a href="">Foot Print</a></li>
</ul>
</li>
<li><a id="" class="" href="">Expertise</a></li>
<li><a id="" class="" href="">Projects</a>
<ul class="sub-menu">
<li><a href="">Geo 228 Portal</a></li>
<li><a href="">NEP Application</a></li>
<li><a href="">Geo Address Book</a></li>
<li><a href="">Assets Management</a></li>
</ul>
</li>
<li><a id="" class="" href="">Contact</a></li>
</ul>
</div>
CSS代码:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: hidden;
z-index: 2;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}
#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: relative;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
谢谢