在CSS中發佈懸停菜單

我正在嘗試構建一個純CSS懸停菜單，並且我的當前代碼有兩個問題。在CSS中發佈懸停菜單

當用戶將鼠標懸停在li標籤與子菜單ul標籤，它推的項目高達而非低於徘徊。
子菜單ul標籤不走父母的寬度li標籤

這裏是源代碼：

您也可以看到代碼的工作副本這裏：http://jsfiddle.net/Fbgug/

HTML：

<ul id="subnav"> 
    <li class="subnavtab"> 
     <a href="">Plan Your Visit</a> 
     <ul class="sub-menu"> 
      <li><a href="">Fee and Hours</a></li> 
      <li><a href="">Directions</a></li> 
      <li><a href="">Field Trips</a></li> 
      <li><a href="">Birthday Parties</a></li> 
      <li><a href="">Rentals</a></li> 
     </ul> 
    </li> 
    <li class="subnavtab"> 
     <a href="">Tour the Museum</a> 
     <ul class="sub-menu"> 
      <li><a href="">Artville</a></li> 
      <li><a href="">ArtZone</a></li> 
      <li><a href="">Exhibitions</a></li> 
     </ul> 
    </li> 
    <li class="subnavtab"> 
     <a href="">Program & Events</a> 
     <ul class="sub-menu"> 
      <li><a href="">Weather or Not</a></li> 
      <li><a href="">Classes & Workshops</a></li> 
     </ul> 
    </li> 
    <li class="subnavtab"><a href="">Membership</a></li> 
    <li class="subnavtab"><a href="">Donate</a></li> 
</ul>

CSS：

#subnav { margin-top: 20px; width: 740px; float: left; position: relative; } 
.subnavtab { background-color: #A1CD3A; padding: 10px 10px 10px 10px; margin: 0 1px 0 1px; display: inline-block; 
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
      -webkit-border-radius-topright: 15px; -moz-border-radius-topright: 15px; border-top-right-radius: 15px; 
      -webkit-border-radius-topleft: 15px; -moz-border-radius-topleft: 15px; border-top-left-radius: 15px; 
      border-radius: 15px 15px 0px 0px; 
      behavior: url(pie.htc); 
} 

.subnavtab:first-child { margin-right: 3px; margin-left: 0px; } 

.subnavtab:last-child { margin-right: 0px; margin-left: 3px; } 

.subnavtab a { color: #000; text-decoration: none; font-weight: bold; font-size: large; } 
.subnavtab a:hover { color: #fff; text-decoration: none; font-weight: bold; font-size: large; } 

#subnav ul.sub-menu 
{ 
    display: none; 
    position: relative; 
    left: -10px; 
    padding: 10px; 
    z-index: 90; 
    list-style-type: none; 
    margin-left: 5px; 
} 

#subnav ul.sub-menu li { text-align: left; } 

#subnav li:hover ul.sub-menu { display: block; background-color: #A1CD3A; 
           -webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; 
           -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-left-radius: 15px; 
           border-radius: 0px 0px 15px 15px; 
           behavior: url(pie.htc); 
} 

#subnav ul.sub-menu a { color: #000; text-decoration: none; font-weight: bold; font-size: small; } 
#subnav ul.sub-menu a:hover { color: #fff; text-decoration: none; font-weight: bold; font-size: small; }

來源

2013-04-01 Michael Kniskern

由於您的li元素都display: inline-block加入vertical-align: top;應該做的伎倆：

.subnavtab { 
    ... 
    vertical-align: top; 
}

http://jsfiddle.net/Fbgug/1/

來源

2013-04-01 20:28:50 dfsq

謝謝，解決這兩個問題，但它造成了一個。它正在推動菜單下的div標籤。我想懸停在所有內容之上。我更新了您在答案中提供的鏈接。 –

這裏是更新的鏈接：http://jsfiddle.net/Fbgug/6/ –

在這種情況下，您需要使用'position：absolute'作爲下拉'li'，'position：relative'作爲父'li'。 http://jsfiddle.net/Fbgug/7/ – dfsq

添加垂直對齊：首位;到.subnavtab。

編輯：dfsq擊敗了我。

來源

2013-04-01 20:31:32 Mike

在CSS中發佈懸停菜單

回答

相關問題