(012)layout_二级纵向菜单 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>navi_v_2.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <link rel="stylesheet" type="text/css" href="../common/reset.css">
    <style type="text/css">
        body {font-family:verdana; font-size:12px; line-height:1.5em;}
        a {color:#000; text-decoration:none;}
        a:hover {color:#f00;}
        #menu {border:1px solid #ccc; width:100px;}
        #menu ul {list-style-type:none; }
        #menu ul li {background:#eee; padding:0 8px; height:26px; border-bottom:1px solid #ccc; line-height:26px; position:relative;}
        #menu ul li ul {display:none; position:absolute; left:100px; top:0; width:100px; border-bottom:none;}
        #menu ul li:hover ul {display:block;}
        #menu ul li.current ul { display:block;} /*兼容ie6，在ie6下只支持a:hover伪类 */
    </style>
    
    <script type="text/javascript">
        window.onload = function() {
            var menuNode = document.getElementById("menu");
            var liNodes = menuNode.getElementsByTagName("li");
            for(var i = 0; i < liNodes.length; i++) {
                liNodes[i].onmouseover = function() {
                    this.className += "current";
                };
                liNodes[i].onmouseout = function() {
                    this.className = this.className.replace("current","");
                }
            }
        }
    </script>
  </head>
  
  <body>
        <div id="menu">
        <ul>
            <li><a href="@#">首页</a></li>
            <li>
                <a href="#">网页版式布局</a>
                <ul>
                    <li><a href="#">自适应宽度</a></li>
                    <li><a href="#">固定宽度</a></li>
                </ul>
            </li>
            <li>
                <a href="#">div+css教程</a>
                <ul>
                <li><a href="#">新手入门</a></li>
                <li><a href="#">视频教程</a></li>
                <li><a href="#">常见问题</a></li>
                </ul>
            </li>
            <li><a href="#">div+css实例</a></li>
            <li><a href="#">常用代码</a></li>
            <li><a href="#">站长杂谈</a></li>
            <li><a href="#">技术文档</a></li>
            <li><a href="#">资源下载</a></li>
            <li><a href="#">图片素材</a></li>
        </ul>
</div>

  </body>
</html>

 

posted @ 2015-01-29 17:21  雪中飞雁  阅读(73)  评论(0)    收藏  举报