CSS Dropdown не работает с зависанием

Question

Я пытаюсь реализовать чисто меню CSS при наведении. Все работает, за исключением того, что при скрытии меню и попытке показать его при наведении ... это не происходит.

Вот мой HTML:

  <ul id="nav-menu"> 
      <li><a href="#" class="first" id="p-menu">A</a></li> 
       <ul class="submenu"> 
        <li><a href="#">1</a></li> 
        <li><a href="#">2</a></li> 
        <li><a href="#">3</a></li> 
        <li><a href="#">4</a></li> 
       </ul> 
      <li><a href="#">B</a></li> 
      <li><a href="#">C</a></li> 
      <li><a href="#">D</a></li> 
      <li><a href="#">E</a></li> 
      <li><a href="#">F</a></li> 
      <li><a href="#">G</a></li> 
      <li><a href="#" class="last">H</a></li> 
     </ul> 

И мой CSS:

#nav-menu { 
    position: relative; 
    } 

     #header .submenu { 
     width: 158px; 
      height: 133px; 
background: url(../images/submenu-bg.png) no-repeat; 
position: absolute; 
top: 49px; left: -11px; 
display: none; 

}

  #header .submenu li a { 
display: block; 
margin: 10px 66px 5px 20px; 
border: 0 none; 

}

 #header .submenu li a:hover { 
display: block; 
margin: 10px 66px 3px 20px; 
border: 0 none; 

}

  #nav-menu #p-menu:hover ul.submenu { 
display: block!important; 

}

Любая помощь будет высоко оценен.

Answer 1

Ваше подменю ul должны быть вложены в вашем li, а не после него. В противном случае это недопустимый HTML. Также вы должны поставить p-menuid на li вместо a.

Изменение:

<li><a href="#" class="first" id="p-menu">A</a></li> 
<ul class="submenu"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
</ul> 

To:

<li id="p-menu"><a href="#" class="first">A</a> 
    <ul class="submenu"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
     <li><a href="#">4</a></li> 
    </ul> 
</li> 

-- SEE EXAMPLE --

Answer 2

Написать так:

<li id="p-menu"> 
<a href="#" class="first">A</a> 
    <ul class="submenu"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    </ul> 
</li> 

Answer 3

Ваш <ul> подменю находится вне <li> тега