CSS下拉菜单项水平走
问题描述:
我在这个问题的*搜索,但我找不到任何东西。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;
}
如何让我的下拉列表项垂直?
答
您积极申报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;
}
答
添加/更改下面的代码:
.dropdown ul li{
display: block;
}
.dropdown:hover ul{
display: inline;
position: absolute;
top: 0;
left: 0;
float: left;
}
JS小提琴链接:
它确实需要一些调整。
问题是,当我将显示器设置为阻止时,整个标题将垂直移动。我想要水平标题列表项目,但下拉列表项目垂直。 – Melvin
看到我的编辑,我没有注意到嵌套李。只需使用'display:block'指定下拉'li'即可。 –