子菜單項將不與父項

我想創建一個下拉菜單排隊，但是。我經歷了很多例子，我總是得到相同的結果。子菜單項將不與父項

我的CSS代碼是

#mainNav { 
    margin-top: 20px; 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0; 
    overflow: hidden; 
    background-color: #BBFFFF; 
    zoom: 1; 
} 

#mainNav li { 
    float: left; 
    list-style: none; 
} 
#mainNav li a { 
    color: #000000; 
    display: block; 
    width: 80px; 
    font-size: 14px; 
    text-align: center; 
    text-transform: uppercase; 
    text-decoration: none; 
    padding: 7px 0px 7px 0px; 
    border-right: 1px solid #999;  
    zoom: 1; 
} 
#mainNav li ul { 
    display: none; 
} 
#mainNav a:hover { 
    background-color: #66FF66; 
} 
#mainNav li:hover ul { 
    display: block; 
    position: absolute; 
} 
#mainNav li:hover li { 
    float: left; 
    width: 80px; 
    background-color: #BBFFFF; 
    margin: 0; 
    padding: 0; 
}

我的HTML是

<div> 
    <ul id="mainNav"> 
    <li><a href="pageone.html" id="pageOneLink">Page One</a></li> 
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li> 
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a> 
     <ul> 
     <li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li> 
     </ul> 
    </li> 
    </ul> 
</div>

來源

2013-02-16 MorganJ

而不是'顯示：block'使其'顯示：直列block' – asifsid88 2013-02-16 19:11:10

在發佈代碼是有幫助的去掉所有的，我們並不需要了解的東西。 – sheriffderek 2013-02-16 20:04:25

你可以使用一個負利潤率左拉回來的線。將它添加到：

#mainNav li:hover ul {}

或者你可以設置填充：0;在同一個元素上。

而且，你缺少在關閉「'：

<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>

來源

2013-02-16 19:13:15 Phil

複製粘貼，並嘗試這個從這個例子中的東西會幫助你

<html> 
<head> 
<style type="text/css"> 
#mainNav{ 
    /* Your mainNav decoration here */ 

} 
#mainNav li{ 
    list-style:none; 
    display:inline-block; 
    background-color:#0FF; 
    padding:10px; 
    border:1px solid #000; 
} 

#mainNav ul{ 
    position:absolute; 
    display:none; 
    padding:0px; 
    top:50px; 
} 

#mainNav li:hover ul{ 
    display:inline-block; 
} 
</style> 
</head> 
<body> 

<ul id="mainNav"> 
    <li><a href="pageone.html" id="pageOneLink">Page One</a> 
    <br /> 
     <ul> 
     <li><a href="onePageOne.html" name="onePageOneLin">Sub Page One</a></li> 
     </ul> 
    </li> 
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li> 
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a> 
    <br /> 
     <ul> 
     <li><a href="threePageOne.html" name="threePageOneLin">Sub Page One</a></li> 
     </ul> 

    </li> 
    </ul> 

</body> 
</html>

來源

2013-02-16 19:40:05 harsh8888

有很多的CSS。在那裏，這是不夠具體和一些東西，只是在錯誤的地方。

我已經在這裏寫出了一個jsfiddle：A DISTILED VERSION OF YOUR CODE

你有李，而不是UL它屬於列表樣式。您對子列表和其他列表的描述也不夠詳細。使用>喜歡，

.main-nav > li > a { }會說只針對李的第一層，並在中，只有在黎等

我會給UL的類等見搗鼓什麼，我想是最簡單的方法。對於其他人，請讓我知道，如果我的小提琴可以更簡潔。

來源

2013-02-16 20:02:41 sheriffderek

此外，爲了方便，我認爲更好的辦法是使用0或什麼，而不是顯示高度：無; - 即使看不到它，也能讓盲人等的屏幕閱讀器閱讀文本。您實際上也可以對高度變化進行動畫處理。 – sheriffderek 2013-02-16 20:08:50

這裏是另一個撥弄我叉式使展會具有高度的0過渡，而不是顯示沒有下拉。 http://jsfiddle.net/sheriffderek/SvUcL/ – sheriffderek 2013-02-16 20:32:32

子菜單項將不與父項

回答

相關問題