Dropdown CSS issue - hidden list shows up when hovered over - html

Question

my problem is that when I hover over the area where the hidden list is, it shows the hidden list. I only want it to show the hidden list when hovered over the 'Language' link on the dropdown menu. Why is it doing this, it's probably something blindingly obvious that I can't spot.
Cheers :)
EDIT: I've already tried using a fixed height for the #lang_bar. I also need the transitions to still work. I've already tried using the display:none and display:block; but that didn't work so I used visibility instead.
Any ideas?
HTML:
<div id="lang_bar">
<ul>
<li><strong>Language</strong>
<ul>
<li><strong>Maori</strong></li>
<li><strong>Tongan</strong></li>
<li><strong>Chinese</strong></li>
<li><strong>Japanese</strong></li>
<li><strong>Korean</strong></li>
</ul>
</ul>
</div>
#lang_bar {
font-family: 'Open Sans', sans-serif;
color: white;
padding-left: 152px;
text-transform: uppercase;
z-index: 40;
position: absolute;
padding-top: 2px;
top: 0;
}
#lang_bar ul ul li a {
padding-top: 3px;
padding-left:5px;
}
#lang_bar ul li ul li a:before {
content: '';
display:block;
right: 0px;
height: 2px;
bottom:117px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.2);
}
#lang_bar ul li ul li a:after {
content: '';
display:block;
right: 1px;
height: 2px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.6);
}
#lang_bar li, #lang_bar li ul {
text-decoration: none;
list-style-type: none;
}
#lang_bar ul {
list-style: none;
padding-left: 0px;
}
#lang_bar ul li {
float: left;
width: 100px;
text-align: left;
line-height: 21px;
}
#lang_bar ul li a {
display: block;
color: #FFF;
background: transparent;
text-decoration: none;
text-align: center;
}
#lang_bar ul li ul {
visibility: hidden;
font-size:12px;
opacity: 0;
}
#lang_bar ul li:hover ul {
opacity: 1;
visibility: visible; /* display the dropdown */
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#lang_bar ul li ul a:hover{
transition-duration: 0.6s;
background-color: rgba(255, 0, 0, 0.23);
}

Answer 1

I changed your css a little bit and here is the result
I used display:none and display: block in place of visibility, and everything is working as it should be.
http://jsfiddle.net/sy3qowxs/5/enter link description here
And here is your final CSS:
#lang_bar {
font-family: 'Open Sans', sans-serif;
color: #123111;
padding-left: 152px;
text-transform: uppercase;
z-index: 40;
position: absolute;
padding-top: 2px;
top: 0;
}
#lang_bar a:link{color:#333333;}
#lang_bar ul ul li a {
padding-top: 3px;
padding-left:5px;
}
#lang_bar ul li ul li a:before {
content: '';
display:block;
right: 0px;
height: 2px;
bottom:117px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.2);
}
#lang_bar ul li ul li a:after {
content: '';
display:block;
right: 1px;
height: 2px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.6);
}
#lang_bar li, #lang_bar li ul {
text-decoration: none;
list-style-type: none;
}
#lang_bar ul {
list-style: none;
padding-left: 0px;
}
#lang_bar ul li {
float: left;
width: 100px;
text-align: left;
line-height: 21px;
}
#lang_bar ul li a {
display: block;
color: #FFF;
background: transparent;
text-decoration: none;
text-align: center;
}
#lang_bar ul li ul {
display: none;
font-size:12px;
opacity: 0;
}
#lang_bar ul li:hover ul {
opacity: 1;
display: block; /* display the dropdown */
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#lang_bar ul li ul a:hover{
transition-duration: 0.6s;
background-color: rgba(255, 0, 0, 0.23);
}

Answer 2

As an alternative to the display: none solution, for accessibility reasons you can use position:absolute and then move the hidden element off screen:
ul li ul {
position:absolute;
top:-1000px;
}
ul li:hover ul {
top:auto;
}

Answer 3

It should work with visibility, since it hides the element (like display: none) but doesn't remove it from the DOM
Here is a working example: Dropdown Menu
HTML
<ul class="menu">
<li class="menu-item"> Dropdown Menu
<ul class="submenu">
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
</ul>
</li>
</ul>
CSS
.menu-item {
position: relative;
}
.menu-item:hover .submenu {
visibility: visible;
opacity: 1;
}
.submenu {
position: absolute;
visibility: hidden;
transition: all .2s ease;
opacity: 0;
top: 100%;
}
.submenu-item {
padding: .4em;
}

Answer 4

What about just using the adjacent sibling combinator:
Change: #lang_bar ul li:hover ul
To: #lang_bar ul li a:hover + ul

Answer 5

To add to the previous answer, the reason this works when you use the display property instead of visibility is because display removes the element from the document flow, and other elements reflow in its place. Visibility, on the other hand, hides the element, but leaves the empty space as if it were still there. So when you used visibility: hidden, your list item looked like it just contained the text "Language" and the link, but the hidden ul was still there, and still hoverable. That's why when you hovered over where the list item should have been, it reappeared; technically, you were hovering over that first list item, because the sub menu was a child of it.
In general, I use display:block/display:none to toggle hiding and showing of items, rather than visibility. Typically the use case is that you want the element completely hidden from the page, and elements around it to reflow, and the display property will do that for you.