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下拉菜单项水平走

回答

相关问题