如何在下拉菜单中显示白色背景溢出?
问题描述:
我有一个纯粹用CSS创建的下拉菜单。我想实现溢出使用z-index(我推测),会溢出我的菜单上的边界,给人的印象是链接和下拉菜单都加入了。如何在下拉菜单中显示白色背景溢出?
该下拉菜单正常工作,但我需要第一个菜单项溢出它的白色背景到下拉菜单。
如果您转到http://cssdesk.com/ztK64并将鼠标悬停在第一个菜单链接上,您会看到我想要解释的内容。
这是我的代码:
CSS
/*Main nav*/
.main_nav_container{
margin: 10px 0 10px 0;
float:right;
}
ul.main_nav{
margin:0;
z-index:1;
postion:absolute;
}
ul.main_nav li{
margin:0;
display:inline-block;
border-top:solid 1px transparent;
border-left:solid 1px transparent;
border-right:solid 1px transparent;
}
ul.main_nav li a{
font-size:13px;
display:block;
font-weight:bold;
height:25px;
line-height:25px;
padding:0 13px;
text-decoration:none;
color:#1122cc;
border:1px solid transparent;
}
ul.main_nav li a:hover{
text-decoration:underline;
}
ul.main_nav li:hover{
border-top:solid 1px #ccc;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-khtml-border-radius: 4px 4px 0 0;
background: #fff;
}
ul.main_nav li:hover ul{
display:inline;
}
ul.main_nav li ul{
display:none;
z-index:500;
position:absolute;
background: #fff;
margin:0;
padding:0;
border:solid 1px #ccc;
-moz-border-radius: 0 4px 4px 4px;
border-radius: 0 4px 4px 4px;
-webkit-border-radius: 0 4px 4px 4px;
-khtml-border-radius: 0 4px 4px 4px;
}
ul.main_nav li ul li{
display:block;
margin:0;
padding:0;
text-align:left;
}
ul.main_nav li ul li:hover{
text-decoration:underline;
border-top:solid 1px #fff;
border-left:solid 1px #fff;
border-right:solid 1px #fff;
}
ul.main_nav li ul li a{
font-weight:normal;
}
HTML
<div class="main_nav_container">
<ul class="main_nav">
<li>
<a id="hover" href="#">For sale</a>
<ul>
<li><a href="#">Property for sale</a></li>
<li><a href="#">New homes for sale</a></li>
<li><a href="#">Find estate agents</a></li>
</ul>
</li>
<li><a href="#">To rent</a></li>
<li><a href="#">New homes</a></li>
<li><a href="#">House prices</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Property advice</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
答
添加以下CSS:
ul.main_nav li:hover a {
border-bottom:1px solid white;
position:relative;
z-index:100;
}
ul.main_nav li:hover ul {
margin-top:-1px;
margin-left:-1px;
z-index:99;
}
你必须有在012 使z-index
正常工作。 a
的底部边界将覆盖ul
的边界。 ul
中的边距变化是为了正确连接它们的效果而定位边框。
问题解决了吗?在示例页面上我看不到问题 - 下拉菜单是白色的。 – 2012-01-09 17:24:44
@MyHeadHurts,不,它不是固定的问题/例子。 OP希望菜单显示为连接到子菜单(菜单的背景应与子菜单的边框重叠)。如果你转到这个例子,并从下面的答案插入CSS,你会看到他的意思:) – 0b10011 2012-01-09 19:11:30