Элемент меню выпадающего меню CSS, перемещающийся влево?

Question

У меня возникли проблемы с этим css-меню (я довольно новичок во всем HTML/CSS-материале, поэтому я собрал код из Wordpress и других сайтов). Все работает отлично, за исключением того, когда происходит следующее:

• я парить над пунктом меню
• Выпадающее меню исчезает в
• Я двигаю курсор из выпадающего меню
• Он движется к очень левая сторона элемента меню и исчезает

Я не понимаю, почему он перемещается влево и не остается в нужном положении, и мне нужна помощь, чтобы избавиться от него.

Вот код CSS:

@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%; 
} 

А вот пример меню:

<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

Вы должны установить position:relative на элементы списка для настройки по умолчанию, а не для государства парения:

#cssmenu ul li { 
    position: relative; 
} 

В противном случае при наведении курсора подменю расположено относительно контейнера меню а не его родитель

Updated fiddle