需要帮助制作悬停时打开的子菜单答案

【问题标题】：Need help making a sub menu that opens on hover需要帮助制作悬停时打开的子菜单
【发布时间】：2013-03-31 02:37:11
【问题描述】：

我已经构建了一个当前运行良好的菜单，我正在尝试添加当鼠标悬停在菜单项上时出现的子菜单项。有谁知道如何做到这一点？

<div id="menu">
            <a  href="#" >Home</a>
            <a  href="#">Submit New Record</a>
            <a   href="#">Sales by Salesperson</a>
            <a   href="#">Total Sales</a>
            <a  href="#" >Sales by Issue</a>
            <a  href="#" >Sales by Ad Size</a> 
            <a  href="#" >Add New User</a>  
            <a href="#">Edit Record</a> 
            <a href="#">Logout</a>
            </div></center>
<style>
#menu{
background-color:#3F9AD1;
height:75px;
width:1206px;
}

#menu a{
border-style:solid;
border-width:2px;
border-color:white;
padding-top: 20px;
float:left;
display:block;
width:130px;
height:70px;
text-decoration:none;
color:white;
text-align:center;
font-family: Arial;
/*box-shadow: 0 -7px 22px 6px #000000 inset;*/
}

#menu a:hover{
    color:#3F9AD1;
    background-color:white;

#html { 
height: 100%; 
margin-bottom: 0.01em;
overflow-y: scroll;
}

</style>

【问题讨论】：

你有尝试过什么吗？（提出更好问题的有用链接：How to Ask、FAQ）
你用谷歌搜索过什么吗？ “html5 悬停菜单”提供了大约 2,000,000 次点击，这个看起来不错：jacwright.github.io/simpli5/demos/hover-menu.html

标签： html css menu hover submenu

【解决方案1】：

您可以前往此处并使用他们的示例教程进行学习。这很容易。只处理你的悬停状态。

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

【讨论】：

【解决方案2】：

我通常会这样做：

<ul class="menu">
    <li>Main Menu Item
        <ul class="submenu">
            <li>Sub Menu Item</li>
        </ul>
    </li>
</ul>

然后是这样的css：

ul.submenu {
    display: none;
}

li:hover ul.submenu {
    display: block;
}

【讨论】：