下拉导航菜单实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_20461915/article/details/51882769

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>下拉导航菜单</title>
    <style type="text/css">
        #menu ul{
            padding:0;margin:0;
        }
        #menu li{
            position:relative;
            width:150px; 
            display:inline-block;
        }
        #menu li ul{
            position:absolute;
            top:100%;
            left:0;
			
            height:auto; 
            background-color:#FF0000;
        }
    </style>
</head>
<body>
    <ul id="menu">
        <li>
           首页
            <ul>
                <li>地址</li>
                <li>产品</li>
            </ul>
        </li>
        <li>
            新闻
            <ul>
                <li>国内要问</li>
                <li>国际新闻</li>
               
            </ul>
        </li>
        <li>
            游戏下载
            <ul>
                <li>联通下载</li>
                <li>移动下载</li>
            </ul>
        </li>
		 <li>
           关于我们
            <ul>
                <li>我们的服务电话</li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript">
    function menu(){
        var elem=document.getElementById("menu");     
        var ul=elem.getElementsByTagName("ul");
        for(var i=0;i<ul.length;i++){
            ul[i].style.display="none";
        }
         
        //bind the action
        var li=elem.getElementsByTagName("li");
        for(var i=0;i<li.length;i++){
            li[i].οnmοuseοver=function(){
                var inli=this.getElementsByTagName("ul");
                for(var j=0;j<inli.length;j++){
                        inli[j].style.display="block";
                }
            };
            li[i].οnmοuseοut=function(){
                var inli=this.getElementsByTagName("ul");
                for(var j=0;j<inli.length;j++){
                        inli[j].style.display="none";
                }
            }
        }
         
 
    }
    window.οnlοad=menu();
    </script>
</body>
</html>