Html 需要帮助制作悬停时打开的子菜单吗

我有一个菜单，我已经建立，目前工作正常，我试图添加子菜单项时，出现鼠标悬停在菜单项。有人知道怎么做吗

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

#菜单{
背景色：#3F9AD1；
高度：75px；
宽度：1206px；
}
#菜单a{
边框样式：实心；
边框宽度：2倍；
边框颜色：白色；
填充顶部：20px；
浮动：左；
显示：块；
宽度：130px；
高度：70像素；
文字装饰：无；
颜色：白色；
文本对齐：居中；
字体系列：Arial；
/*盒影：0-7px22px6px#000000插图*/
}
#菜单a：悬停{
颜色：#3F9AD1；
背景色：白色；
#html{
身高：100%；
边缘底部：0.01em；
溢出y：滚动；
}

您可以到这里学习使用他们的示例教程。这很简单。只需处理悬停状态即可

---

我通常这样做：

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

ul.submenu {
    display: none;
}

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

---

你尝试过什么吗？（有助于提出更好问题的链接：，）你用谷歌搜索过什么吗？“html5悬停菜单”的点击率约为2000000，这一个看起来不错：