CSS dropdown menu element moving to left? - html

Question

I'm having some troubles with this css menu of mine (I'm pretty new to the whole HTML/CSS thing, and so I pieced together some code from Wordpress and other websites). Everything works fine, except when the following occurs:
I hover over a menu item
The dropdown menu fades in
I move my cursor out of the dropdown menu
It moves to the very left side of the menu element and fades out
I don't understand why it moves to the left and doesn't stay in its intended position, and I need some help getting rid of it.
Here's the CSS code:
#import url(http://fonts.googleapis.com/css?family=Droid+Serif);
#cssmenu {clear: both; padding: 0; display: block; margin: 0; border: 0; float: left; z-index: 99999;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding-left: 0;}
#cssmenu ul {position: relative; z-index: 99999; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 99999; cursor: default; opacity: 1;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 99999; width: 100%;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
position: fixed;
top: 0;
left: 180px;
width:100%;
background: #020202;
border-bottom: 4px solid #08c1c3;
font-family: 'Droid Serif', serif;
font-size: 14px;
}
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
display: block;
background: #020202;
color: #CCC;
opacity: 1;
padding: 0 20px;
z-index: 99999;
}
#cssmenu ul ul {
border-top: 4px solid #08c1c3;
text-transform: none;
min-width: 190px;
float: left;
opacity: 0;
position: absolute;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.4s, opacity 0.4s ease-in;
-moz-transition: visibility 0s 0.4s, opacity 0.4s ease-in;
-o-transition: visibility 0s 0.4s, opacity 0.4s ease-in;
transition: visibility 0s 0.4s, opacity 0.4s ease-in;
z-index: 99999;
}
#cssmenu ul ul a {
background: #020202;
color: #CCC;
border: 1px solid #08c1c3;
border-top: 0 none;
line-height: 1.25;
padding: 16px 20px;
z-index: 99999;
width: 150px;
}
#cssmenu ul li:hover > ul {
display: block;
opacity: 1;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in;
visibility: visible;
}
#cssmenu ul ul li {
}
#cssmenu > ul > li > a { line-height: 48px; }
/* #cssmenu ul ul li:first-child > a { border-top: 1px solid #08c1c3; }
#cssmenu ul ul li:hover > a { background: #333; } */
#cssmenu ul ul li:last-child > a {
box-shadow: 0 1px 0 #08c1c3;
}
#cssmenu ul li:hover > a, #cssmenu ul li.active > a {
background: #333;
color: #08c1c3;
opacity: 1;
} /* Top level of menu */
#cssmenu ul li.has-sub > a:after {
content: "\00BB";
float: right;
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
And here's an example menu:
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'>Home</a></li>
<li class='has-sub '><a href='#'>A</a>
<ul>
<li><a href='#'>A-a</a></li>
<li><a href='#'>A-b</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>B</a>
<ul>
<li><a href='#'>B-a</a></li>
<li><a href='#'>B-b</a></li>
<li><a href='#'>B-c</a></li>
</ul>
</li>
<li><a href='#'>C</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>

Answer 1

You need to set position:relative on the list items for the default state, not for the hover state:
#cssmenu ul li {
position: relative;
}
Otherwise when you hover out the sub-menu is positioned relative to the menu container and not its parent
Updated fiddle