Question

我创建了一个导航栏。现在我想把这个栏扩展到下拉菜单。这是一个 jfiddle 。

如果我将鼠标悬停在最后一个元素上，我无法看到下拉栏（class="dropdown_ul"），如果我使用“检查元素”，我看到css会更改dropdown_ul的显示，但我看不到/找到它。

.float_left {
    float: left;
}
.float_right {
    float: right;
}
.clear_both {
    clear: both;
}
* {
    margin: 0px;
    padding: 0px;
    font-family:"Oswald", sans-serif;
}
body {
    background-color: #E2DCDC;
}
nav {
    width: 994px;
    background-color: #77BCF1;
    border: 3px solid white;
    margin: 45px auto;
    color: black;
}
nav > .navigationbar_ul {
    list-style-type: none;
    width: 100%;
    font-size: 0px;
}
nav > .navigationbar_header {
    width: 100%;
    text-align: center;
}
.navigationbar_li {
    display: inline-block;
}
.navigationbar_li_left {
    border-right: 3px solid white;
}
.navigationbar_li_right {
    border-right: none;
    border-left: 3px solid white;
}
.navigationbar_li:last-child {
    margin-right: 0px;
}
.navigationbar_li > .navigationbar_a {
    color: black;
    font-size: 16px;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out 0s;
}
.navigationbar_li > .navigationbar_a:hover {
    background-color: white;
}
.dropdown_ul {
    position: absolute;
    top: 0px;
    left: 0;
    width: 150px;
    visibility: hidden;
    display: none;
}
.dropdown_li {
    display: block;
}
.navigationbar_li:hover .dropdown_ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

<nav>
	<ul class="navigationbar_ul">
		<div class="float_left">
			<li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 1</a></li>
			<li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 2</a></li>
		</div>
		<div class="float_right">
			<li class="navigationbar_li navigationbar_li_right"><a class="navigationbar_a" href="#">Link 3</a>
				<ul class="dropdown_ul">
					<li class="dropdown_li"><a class="dropdown_a">Link 1</a></li>
				</ul>
			</li>
		</div>
		<div class="clear_both"></div>
	</ul>
</nav>

Answer 1

这是因为你在这里指定了font-size 0

nav > .navigationbar_ul {
 font-size: 0px;
}

将0px更改为14px，您将看到文字。

Answer 2

你必须做3件事。

从语义上讲，在ul之后添加div而不是li是错误的。因此，请删除.float_left和.float_left div，并将此类添加到li本身。

将position: relative;添加到.navigationbar_li_right，以便绝对定位的.dropdown_ul会像您提出的问题一样向下显示。

当您悬停font-size时增加.navigationbar_li_right

http://jsfiddle.net/6Lf0wpvz/4/

Answer 3

修改

将.navigationbar_li:hover .dropdown_ul更改为：

.navigationbar_li:hover .dropdown_ul { display: block !important; opacity: 1; visibility: visible !important; }

您需要添加!important才能覆盖之前的display:none和visibility:hidden

顺便说一下，在声明visibility:hidden
时，您可能会放弃display:none
希望这有帮助！

无法看到dropdownmenü的元素

3 个答案: