帶水平子菜單的CSS下拉菜單

Question

我有以下網站http://jsfiddle.net/Me4fw/4/其中我試圖實現一個水平CSS下拉菜單，它有一個也是水平的子菜單。我嘗試了一切，但似乎沒有任何東西讓子菜單項互相坐在一起。我能讓他們做的就是互相混搭，難以理解。

Answer 1

你的問題是，你正在把子菜單absolutly定位到父李。但是，李氏的寬度很小。

解決方法是將子菜單絕對定位到菜單包裝。

請參閱此鏈接與working presentation!

更新您的CSS：

#menu { 
    width: 820px; 
    height: 60px; 
    margin: 0 auto; 
    padding: 0px 40px; 
    position: relative; 
} 

#menu li { 
    float: left; 
} 

#menu ul ul { 
    list-style-type: none; 
    position: absolute; 
    z-index: 500; 
    left: 0; 
    right: 0; 
} 

並刪除此CSS：

#menu ul li ul li #jackie_spencer{ 
    display: inline; 
    position: absolute; 
    top: 20px; 
    left: 0; 
    width: 100px;  
    color: #FFF; 
} 

注：

您可以查看源和檢查CSS：

• 在那裏讀「更新」，一些定義發生了變化！
• 它在那裏讀取「更新，刪除」，聲明被刪除。

Answer 2

我看了一下你的網頁，你的子菜單是垂直的原因是子<ul>過於狹窄：其寬度是一樣的封閉<li>。您應該在其上設置一個寬度以使其佔用所有可用空間。

使其與父元素左對齊並右對齊菜單欄的右端是棘手的。您可能只想將其設置爲足夠寬以容納您知道的所有內容，並假定不會有任何迴流。

您也可以使用一些JavaScript來計算正確的位置。 JQuery對此很有幫助。作爲$（document）.ready（）的一部分，您只需要在頁面首次加載時設置一次。

Answer 3

一些調整，以給第二級子菜單：

/* Menu */ 
#menu { /* UPDATED */ 
    width: 820px; 
    height: 60px; 
    margin: 0 auto; 
    padding: 0px 40px; 
    position: relative; 
} 

#menu ul { 
margin: 0; 
padding: 0px 0px 0px 0px; 
line-height: normal; 
line-style: none; 
list-style-type: none; 
} 

#menu a { 
display: block; 
height: 20px; 
margin-right: 1px; 
padding: 10px 20px 0px 20px; 
/* height: 40px; 
margin-right: 1px; 
padding: 20px 20px 0px 20px;*/ 
text-decoration: none; 
text-transform: uppercase; 
font-family: 'Abel', sans-serif; 
font-size: 16px; 
font-weight: normal; 
color: #FFFFFF; 
border: none; 
} 

#menu a:hover { 
background: url(images/page-content-bg.png) repeat; 
} 

#menu ul ul a:hover { 
background: url(images/page-menu-bg.png) repeat; 
} 

#menu .current_page_item a { 
background: url(images/page-content-bg.png) repeat; 
} 



#menu li { /* UPDATED */ 
    float: left; 
} 

/* UPDATED, REMOVED 
#menu ul li ul li #jackie_spencer{ 
display: inline; 
position: absolute; 
top: 20px; 
left: 0; 
width: 100px;  
color: #FFF; 
} 
*/ 
#menu ul ul { /* UPDATED */ 
    list-style-type: none; 
    position: absolute; 
    z-index: 500; 
    left: 50px; 
    right: 0; 
} 

#menu ul ul ul { 
position: absolute; 
/* top: 0; 
left: 100%;*/ 
    z-index: 500; 
    left: 50px; 
    right: 0; 

} 

div#menu ul ul, 
div#menu ul li:hover ul ul, 
div#menu ul ul li:hover ul ul 
{display: none;} 

div#menu ul li:hover ul, 
div#menu ul ul li:hover ul, 
div#menu ul ul ul li:hover ul 
{display: block;} 
div#menu ul ul li:hover { background:#c0c0c0;} 
div#menu ul ul li { background:#cccccc;} 
div#menu ul ul li a:hover { color:#000;} 

頁代碼

<div id="menu"> 
       <ul> 
        <li class="current_page_item"><a id="home_menu" href="#Home">Home</a><ul> 
    <li><a href="#">linkx</a></li> 
    <li><a href="#">linkx</a></li> 
    <li><a href="#">linkx</a></li> 
    <li><a href="#">linkx</a></li> 
    <li><a href="#">linkx</a></li> 
    <li><a href="#">linkx</a> 
    <ul> 
    <li><a href="#">linky</a></li> 
    <li><a href="#">linky</a></li> 
    <li><a href="#">linky</a></li> 
    <li><a href="#">linky</a></li> 
    <li><a href="#">linky</a></li> 
    <li><a href="#">linky</a></li> 
</ul> 
    </li> 
</ul></li> 
        <li><a id="aboutus_menu" href="#About_Us">About Us</a><ul> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
</ul></li> 
       </ul> 
       <ul> 
        <li><a id="what_we_do" href="#What_We_Do">What We Do</a> 
         <ul> 
          <li><a id="jackie_spencer" href="#Jackie_Spencer">Hypnotherapy</a></li> 
          <li><a id="diana_menz" href="#Diana_Menz">Massage</a></li> 
          <li><a id="afton_land" href="#Jackie_Spencer">Estitician</a></li> 
         </ul> 
        </li> 
       </ul> 
       <ul> 
        <li><a id="contactus_menu" href="#Contact_Us">Contact Us</a><ul> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
</ul></li> 
       </ul> 
      </div>