如何在下拉菜單中顯示白色背景溢出？

我有一個純粹用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>

來源

2012-01-09 hairynuggets

問題解決了嗎？在示例頁面上我看不到問題 - 下拉菜單是白色的。 – 2012-01-09 17:24:44

@MyHeadHurts，不，它不是固定的問題/例子。 OP希望菜單顯示爲連接到子菜單（菜單的背景應與子菜單的邊框重疊）。如果你轉到這個例子，並從下面的答案插入CSS，你會看到他的意思:) – 0b10011 2012-01-09 19:11:30

添加以下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 16:46:28 0b10011

如何在下拉菜單中顯示白色背景溢出？

回答

相關問題