Can't see the elements of the dropdown menu

Issue

I created a navigation bar. Now I want to expand this bar to include a dropdown menu. Here is a jfiddle.

If I hover over the last element, I can't see the dropdown bar (class="dropdown_ul"). And if I use "examine element" I see that the CSS changes the display of the dropdown_ul, but I cant see/find it.

.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>

Solution

It is because you have specified font-size 0 here

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

Change the 0px to i.e. 14px and you will see the text.

Answered By - brance