看不到下拉菜单的元素

Question

我创建了一个导航栏。现在我想将此栏扩展为下拉菜单。这里有个jfiddle.

如果我将鼠标悬停在最后一个元素上，我看不到下拉栏 (class="dropdown_ul")，如果我使用 "examine element"，我会看到 css 更改 [=13] 的显示=], 但我不能 see/find 它。

.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

因为你在这里指定了字体大小0

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

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

Answer 2

编辑

将.navigationbar_li:hover .dropdown_ul更改为：

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

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

顺便说一句，你最好在声明 display:none

时放弃 visibility:hidden

希望对您有所帮助！

Answer 3

你必须做 3 件事。

从语义上讲，在 ul 而不是 li 之后添加 div 是错误的。所以删除 .float_left 和 .float_left divs 并将这个 class 添加到 li 本身。

将 position: relative; 添加到 .navigationbar_li_right，这样绝对定位的 .dropdown_ul 将像您要求的下拉菜单一样显示在右下方。

悬停时增加 font-size .navigationbar_li_right

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

看不到下拉菜单的元素

cant see the elements of the dropdownmenü

html

css