css導航欄與子菜單問題

我希望有人可以幫我解決一直困擾我一整天的css問題。我知道我在這裏錯過了一些明顯的東西，我只是看不到它。如果你能幫助，將不勝感激。css導航欄與子菜單問題

這裏是小提琴http://jsfiddle.net/taglegacy/HK7Hy/

這裏是CSS：

body 
{ 
    margin: 20; 
    padding: 20; 
    text-align: center; 
    font: 85% arial, helvetica, sans-serif; 
    background: #f1f1f1; 
    color: #444; 
} 
#container 
{ 
    text-align: left; 
    margin: 0 auto; 
    width: 700px; 
    height: 400px; 
    background: #FFF; 
} 
/*---NavigationBar---*/ 
ul 
{ 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
    background: #9b1b19; 
} 
ul li 
{ 
    display: block; 
    position: relative; 
    float: left; 
    border-right: 1px solid #fff; 
} 
li ul 
{ 
    display: none; 
    position:absolute; 
    left:0; 
} 
ul li a 
{ 
    display: block; 
    text-decoration: none; 
    color: #fff; 
    padding: 5px 15px 5px 15px; 
    background: #9b1b19; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover 
{ 
    background: #af1f1c; 
} 
li:hover ul 
{ 
    display: block; 
    position: absolute; 
    background: #af1f1c; 
} 
li:hover li 
{ 
    float: none; 
    font-size: 11px; 
    background: #af1f1c; 
    border-top: 1px solid #fff; 
} 
li:hover a 
{ 
    background: #af1f1c; 
} 
    li:hover li a:hover 
{ 
    background: #af1f1c; 
}

這裏是HTML：

<body> 
<div id="container"> 
<ul> 
<li><a href="">Menu 1</a></li> 
<li><a href="">Menu 2</a> 
<ul> 
<li><a href="">Submenu 1</a></li> 
<li><a href="">Submenu 2</a></li> 
<li><a href="">Submenu 3</a></li> 
</ul> 
</li> 
<li><a href="">Menu 3</a> 
<ul> 
<li><a href="">Submenu 1</a></li> 
<li><a href="">Submenu 2</a></li> 
<li><a href="">Submenu 3</a></li> 
<li><a href="">Submenu 4</a></li> 
<li><a href="">Submenu 6</a></li> 
</ul> 
</li> 
<li><a href="">Menu 4</a> 
<ul> 
<li><a href="">Submenu 1</a></li> 
<li><a href="">Submenu 2</a></li> 
<li><a href="">Really Long Submenu 3 Really Long</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</body>

來源

2014-02-07 TAG

究竟是什麼問題..？ – Timo002

你想做什麼？你的問題是什麼？ – tjons

您正在使用CSS：將鼠標懸停在子菜單上。但懸停只適用於父菜單。所以離開父母關閉子菜單！我認爲你需要用CSS來做一些不錯的選擇，或者使用javascript來顯示子菜單！ – Timo002

的「很長」列表項被切斷，因爲您的子菜單ul設置爲其父項的寬度li。拿出width: 100%，它會顯示輸入文本。這使得它僅適用於父ul

移至保留導航欄寬度：

#topnav { width: 100% }

Fiddle

來源

2014-02-07 23:36:05 helion3

非常感謝你的直接完美答案！你太棒了！ – TAG

我認爲，需要針對第二UL一個position:absolute。玩padding-top和/或top。在這個例子中，padding-top等於主菜單項的高度。

ul#topnav > li > ul {position: absolute; top:0; left:0; padding-top:36px;}

應該工作，祝你好運！

來源

2014-02-07 23:43:10 ddlab

謝謝你的時間。我也會嘗試一下，喜歡用css來尋找一種新的/更好的方式去做事情。 – TAG

無論如何，Helion的答案是更好的，不僅僅是更好的答案，它是正確的答案:-) – ddlab

css導航欄與子菜單問題

回答

相關問題