html - ホバー時に開くサブメニューを作成するのに助けが必要

Question

作成したメニューは現在正常に動作しています。メニュー項目の上にマウスを置いたときに表示されるサブメニュー項目を追加しようとしています。誰もこれを行う方法を知っていますか?

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