我在stackoverflow上搜索了这个问题,但我找不到任何东西。
我一直在使用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;
}
如何垂直获取下拉列表项?
答案 0 :(得分:2)
您主动声明li
在此处显示inline
:
#header li {
...
display: inline;
...
}
内联意味着,基本上,&#34;不要强制换行到下一行。&#34;拿出来,它应该回到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;
}
答案 1 :(得分:0)
添加/更改以下代码:
.dropdown ul li{
display: block;
}
.dropdown:hover ul{
display: inline;
position: absolute;
top: 0;
left: 0;
float: left;
}
JS Fiddle Link:
虽然确实需要一些调整。