CSSドロップダウンがホバリングで動作しない

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をaの代わりにliに置く必要があります。

変更：

<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 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>タグの外側にある