cant see the elements of the dropdownmenü - html

Question

I created a navigationbar. Now I want to expand this bar to dropdown menü.
Here is a jfiddle.
If I hover over last element, i cant see the dropdownbar (class="dropdown_ul")and if I use "examine element" I see that the css change 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>

Answer 1

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.

Answer 2

You got to do 3 things.
Semantically it is wrong to add div in ul right after, instead of li. So remove .float_left and .float_left divs and add this class to li itself.
Add position: relative; to .navigationbar_li_right so that absolutely positioned .dropdown_ul will display right down like a drop down menu as you have asked.
Increase the font-size when you hover .navigationbar_li_right
http://jsfiddle.net/6Lf0wpvz/4/

Answer 3

EDIT
Change .navigationbar_li:hover .dropdown_ul to:
.navigationbar_li:hover .dropdown_ul {
display: block !important;
opacity: 1;
visibility: visible !important;
}
You need to add !important in order to override the previous display:none and visibility:hidden
By the way, you might as well ditch the visibility:hidden when declaring display:none
Hope this helps!