ドロップダウンメニューHTML

Question

メニューにドロップダウンを使用する際に問題があります。私は自分のメニューをドロップダウンすることができ、同時にドロップダウンをホバーしたい。これで私を助けてくれますか？

ここに私のコードです：

あなたはこのような代わりに、このためのようにドロップダウンメニューの適切な構造を追加する必要が

#menu { 
 
    float: left; 
 
    width: 971px; 
 
    height: 70px; 
 
    background: url(../images/menu_bg.gif) no-repeat 0 0 #CCC 
 
} 
 
#menu ul { 
 
    float: right; 
 
    width: 936px; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 12px 0 0 35px 
 
} 
 
#menu li { 
 
    float: left; 
 
    width: auto; 
 
    font: 18px/20px"ZapfHumnst BT", Arial, Helvetica, sans-serif; 
 
    color: #fff; 
 
    padding: 10px 27px 20px 27px; 
 
    background: url(../images/menu_border.gif) no-repeat 0 0 
 
} 
 
#menu li a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
#menu li a:hover { 
 
    color: #fff; 
 
    text-decoration: underline; 
 
} 
 
#menu li a.current { 
 
    color: #fff; 
 
    text-decoration: none 
 
} 
 
#menu li.first { 
 
    background: none; 
 
    padding: 10px 27px 0 64px 
 
} 
 
#menu li.last { 
 
    background: none; 
 
    background: url(../images/menu_border.gif) no-repeat 0 2px; 
 
    padding: 10px 0 27px 27px 
 
}

<div id="menu"> 
 
    <ul> 
 
    <li class="first"><a href="index.php">Home</a> 
 
    </li> 
 
    <li><a href="about_us.html">About Me</a> 
 
    </li> 
 
    <li><a href="privacy.html">A True Story</a> 
 
    </li> 
 
    <li><a class="current" href="projects.html">Menopause Overview</a> 
 
    </li> 
 
    <!-- <li><a href="services.html">Services</a></li> --> 
 
    <li><a href="support.html">News</a> 
 
    </li> 
 
    <li><a href="contact_us.html">Contact Us</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

：:hoverで、その後

<div id="menu"> 
    <ul> 
    <li class="first"><a href="index.php">Home</a> 
    </li> 
    <li><a href="about_us.html">About Me</a> 
    </li> 
    <li><a href="privacy.html">A True Story</a> 
    </li> 
    <li><a class="current" href="projects.html">Menopause Overview</a> 
     <ul> 
     <li><a href="services.html">Services</a></li> 
     </ul> 
    </li> 

    <li><a href="support.html">News</a> 
    </li> 
    <li><a href="contact_us.html">Contact Us</a> 
    </li> 
    </ul> 
</div> 

をイベント、ドロップダウンを表示/非表示にすることができます：

#menu li ul { display: none; position : absolute; left: 0; top: 50px; background: #333; width: auto; padding: 0;} 
#menu li:hover ul {display: block; } 

See this fiddle