cant см. Элементы dropdownmenü

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> 
 
\t <ul class="navigationbar_ul"> 
 
\t \t <div class="float_left"> 
 
\t \t \t <li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 1</a></li> 
 
\t \t \t <li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 2</a></li> 
 
\t \t </div> 
 
\t \t <div class="float_right"> 
 
\t \t \t <li class="navigationbar_li navigationbar_li_right"><a class="navigationbar_a" href="#">Link 3</a> 
 
\t \t \t \t <ul class="dropdown_ul"> 
 
\t \t \t \t \t <li class="dropdown_li"><a class="dropdown_a">Link 1</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t </div> 
 
\t \t <div class="clear_both"></div> 
 
\t </ul> 
 
</nav>

Answer 1

Это потому, что вы указали размер шрифта 0 здесь

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

Изменение 0px в то 14px и вы увидите текст.

Answer 2

EDIT

Изменить .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

Надеюсь, это поможет!

Answer 3

Вы должны сделать 3 вещи.

Семантически неправильно добавлять div в ul сразу после, вместо li. Поэтому удалите .float_left и .float_left divs и добавьте этот класс в ли.

Добавить position: relative; в .navigationbar_li_right, так что абсолютно позиционируется .dropdown_ul будет отображаться прямо вниз, как выпадающее меню, как вы просили.

Увеличьте font-size при наведении .navigationbar_li_right

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