CSS-Выпадающее меню перекрывается

Question

Привет, я создал раскрывающееся меню, однако, когда я наводил курсор на опцию, элементы в подменю просто накладываются друг на друга. Я пытался поиграть с дополнением, позиционированием и т. Д., Но ничего не работает. Буду признателен, если кто-нибудь сможет помочь. Благодаря

HTML:

 <div class="menu-bg"> 
     <div class="menu_nav"> 
     <ul> 
      <li class="active"><a href="#"><span>Home</span></a></li> 
      <li><a href="" onclick="return false;">Books</a> 
      <ul> 
      <li><a href="#">Horror</a></li> 
      <li><a href="#">Thriller</a></li> 
      <li><a href="#">Non Fiction</a></li> 
      <li><a href="#">Crime</a></li> 
      <li><a href="#">Other</a></li> 
      </ul> 
      </li> 
      <li><a href="#"><span>About us</span></a></li> 
      <li><a href="#"><span>Blog</span></a></li> 
      <li><a href="#"><span>Contact</span></a></li> 
     </ul> 
     </div> 
</div> 

CSS:

.menu-bg{ 
background:url(../images/menu.png) center top repeat-x; 
padding:10px 0; 
width:100%; 
height:50px; 
} 

.menu_nav { 
margin-top:-10px; 
padding-right:30px; 
margin-left: auto; 
margin-right: auto; 
width:960px; 
z-index:20; 
} 

.menu_nav ul { 
position: relative; 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    border-left: 1px solid #494949; 

} 
.menu_nav ul li { 
    border-right: 1px solid #494949; 
    padding: 0; 
    display: table-cell; 
    float: left; 
    height: 22px; 
} 
.menu_nav ul li a { 
text-decoration:none; 
text-align: center; 
    text-transform: uppercase; 
    font-size: 18px; 
    line-height: 22px; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    color: #7c7c7c; 
    height: 22px; 
    display: block; 
    padding: 3px 60px 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

.menu_nav ul li.active a, .menu_nav ul li a:hover { 

    text-decoration:none; 
    color:#EEE; 
} 

#active { 
     text-decoration:none; 
    color:#EEE; 
} 


    .menu_nav li ul { 
    z-index:999; 
     position: absolute; 
     left: -999em; 
     width: 160px; 
     padding: 0; 
    } 
    .menu_nav li:hover ul { 
     left: auto; 
    } 

    .menu_nav li li a { 

     background: #060505; 
     width: 120px; 
     color: #FFFFFF; 
     display: block; 
    font-size:14px; 
    text-align:left; 
     margin: 0; 
     padding: 9px 0 10px 25px; 
     text-decoration: none; 

    } 
    .menu_nav li li a:hover { 
     background: #99436E; 
     color: #FFFFFF; 
     margin: 0; 
     padding: 9px 0 10px 25px; 
     text-decoration: none; 
     border-bottom: 1px dotted #eee; 
    } 
    .menu_nav li ul ul { 
     margin: -35px 0 0 145px; 
    } 
    .menu_nav li:hover ul ul { 
     left: -999em; 
    } 
    .menu_nav li ul li:hover ul { 
     left: auto; 
    } 

Answer 1

Высота на li была слишком маленькой, я доводил до 42 пикселей; измените его на все, что вы считаете лучшим.

.menu_nav ul li { 
    border-right: 1px solid #494949; 
    padding: 0; 
    display: table-cell; 
    float: left; 
    height: 42px; 
} 

http://jsfiddle.net/pR5HT/

Answer 2

99% времени, это фиксирует это: Стиль в ссылки, а не списки.

Используйте display:block на A -tag и положите все модели на A -tag, а не LI.

Использовать position:, float: или display: на LI. Все остальное происходит с элементом A-tag.