如何使鼠标悬停在CSS上的菜单

我有一个菜单。当我将鼠标悬停在它们上面时，我需要显示子菜单。我有一些代码如下。但子菜单与现有菜单重叠。如何使鼠标悬停在CSS上的菜单

以下是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>CSS Drop Down Menus</title> 

    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 
    body { 
     font-family: "Trebuchet MS", Helvetica, Sans-Serif; 
     font-size: 14px; 
    } 
    a { 
     text-decoration: none; 
     color: #838383; 
    } 
    a:hover { 
     color: black; 
    } 
    #menu { 
     position: relative; 
     margin-left: 30px; 
    } 
    #menu a { 
     display: block; 
     width: 140px; 
    } 
    #menu ul { 
     list-style-type: none; 
     padding-top: 5px; 
    } 
    #menu li { 
     float: top; 
     position: relative; 
     padding: 3px 0; 
     text-align: center; 
    } 
    #menu ul.sub-menu { 
     display: none; 
     position: absolute; 
     top: 20px; 
     left: -10px; 
     padding: 10px; 
     z-index: 90; 
    } 
    #menu ul.sub-menu li { 
     text-align: top; 
    } 
    #menu li:hover ul.sub-menu { 
     display: block; 
     border: 1px solid #ececec; 
    } 
    </style> 
</head> 
<body> 
<div id="menu"> 
    <ul> 
    <li><a href="#">Home</a> 
     <ul class="sub-menu"> 
     <li><a href="#">Pages</a></li> 
     <li><a href="#">Archives</a></li> 
     <li><a href="#">New Posts</a></li> 
     <li><a href="#">Recent Comments</a></li> 
     </ul> 
    </li> 
    <li><a href="#">About</a> 
     <ul class="sub-menu"> 
     <li><a href="#">Get to know us</a></li> 
     <li><a href="#">Find out what we do</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Contact</a> 
     <ul class="sub-menu"> 
     <li><a href="#">E-mail Us</a></li> 
     <li><a href="#">Use Our Contact Form</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</body> 
</html>

我需要一些像这样的效果。 enter image description here