急！点击菜单后菜单不消失的问题

点击菜单中某一项（事件成功执行），鼠标不移开，菜单不消失，一直在网页最上层，鼠标移开了，点击的菜单才消失，正常点击后菜单不应该自动消失吗，不解，怎么解决？代码如下：


菜单：
   <style type="text/css">   
        .head-nav {
            width: 1360px;
            height: 60px;
            background: #007130;
        }
        .head-nav-con {
            width: 1360px;
            height: 60px;
            margin: auto;  
        }
        .head-nav-con ul li {
            width: 170px;
            float: left;
            font-size: 20px;
            text-align: center;
        }
        .head-nav-con ul li:hover {
            background: #ff9c01;
        }
        .head-nav-con ul a {
            display: block;
            text-decoration: none;  
            text-align: center;
            line-height: 60px;
            color: white;   
        }
        
        
   
        .head-nav-con .drop-down {
            position: relative;
        }
        .head-nav-con .drop-down-content {   
            padding: 0;
            display: none;
            position: absolute;
            z-index: 1;
            background: #007130;
        }
               
        .head-nav-con .drop-down-content li:hover > a {  
            background-color: #ff9c01;
            
        }
        .head-nav-con .drop-down:hover .drop-down-content {
            display: block;
        }
     </style>     
         

js脚本如下：
 <script type="text/javascript">
 function aa(str) {
            var mainContent = document.getElementById('IFRAME1');
         
            mainContent.src = str ;
   
        }
</script>

菜单中某一项：
   <li class="drop-down"><a href="#">基本信息</a>
                         <ul class="drop-down-content" >
                           <li><a href="javascript:void(0);"  onclick="aa('1.aspx')">录入</a></li>
                        </ul>
   </li>