CSS下拉菜單項水平走

我在這個問題的stackoverflow搜索，但我找不到任何東西。CSS下拉菜單項水平走

我一直在研究CSS中的下拉菜單。當您將鼠標懸停在下拉菜單上時，下拉菜單項會水平顯示，而不是垂直顯示。

HTML

<div id="header">header 
<ul> 
    <li><a>Home</a></li> 
    <li><a></a>Biografie</a></li> 
    <li><a>Foto's</a></li> 
    <li class="dropdown">Meer 
     <ul> 
      <li><a>tutorials</a></li> 
      <li><a>inhuren</a></li> 
     </ul> 
    </li> 
</ul>

CSS

/*header*/ 
#header { 
    background-color: #5c931f; 
} 

#header ul { 
    list-style-type: none; 
} 

#header li { 
    width: 100px; 
    border: 1px solid black; 
    display: inline; 
    background-color: #000; 
    color: #808080; 
    position: relative; 
    text-align: center; 
} 

#header li:hover { 
    color: blue; 
} 
/*dropdown menu*/ 
.dropdown ul{ 
    display: none; 
} 
.dropdown:hover ul{ 
    display: block; 
    position: absolute; 
}

如何讓我的下拉列表項垂直？

來源

2015-05-09 Melvin

您積極申報li在這裏顯示inline：

#header li { 
... 
display: inline; 
... 
}

內嵌意味着，基本上，「不要強迫換到下一行。」拿出來，它應該回到block的行爲。

編輯：以前我沒有注意到嵌套li。

地址：

#header .dropdown li { 
    display: block; 
}

或者，只針對直接子li內聯（注意，這會影響應用到li所有樣式：

#header > ul > li { 
width: 100px; 
border: 1px solid black; 
display: inline; 
background-color: #000; 
color: #808080; 
position: relative; 
text-align: center; 
}

來源

2015-05-09 18:51:02

問題是，當我將顯示器設置爲阻止時，整個標題將垂直移動。我想要水平標題列表項目，但下拉列表項目垂直。 – Melvin

看到我的編輯，我沒有注意到嵌套李。只需使用'display：block'指定下拉'li'即可。 –

添加/更改下面的代碼：

.dropdown ul li{ 
    display: block; 
} 
.dropdown:hover ul{ 
    display: inline; 
    position: absolute; 
    top: 0; 
    left: 0; 
    float: left; 
}

JS小提琴鏈接：

http://jsfiddle.net/kr2jw577/

它確實需要一些調整。

來源

2015-05-09 19:00:51 Julian

CSS下拉菜單項水平走

回答

相關問題