DROPDOWN MENU 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

您必须添加下拉菜单中合适的结构，如用于代替本：

<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> 

然后，用:hover事件，你可以显示/隐藏下拉菜单：

#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