(019)layout_二级横向菜单 

<!DOCTYPE html>
<html>
  <head>
    <title>navi_h_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 {width:500px; height:28px; margin:0 auto; border-bottom:3px solid #e10001;}
        #menu ul {list-style-type:none; }
        #menu ul li {float:left; margin-left: 2px;}
        #menu ul li a {display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(../image/navi_h_logo3.gif) 0 0 no-repeat; font-size:12px;}
        #menu ul li a:hover {background:url(../image/navi_h_logo1.gif) 0 0 no-repeat; color:#fff;}
        
        #menu ul li ul {border:1px solid #ccc; position:absolute; display:none;}
        #menu ul li ul li {float:none;width:85px;background:#eee;margin:0;}
        #menu ul li ul li a {background:none;}
        #menu ul li ul li a:hover {background:#333; color:#fff;}
        #menu ul li:hover ul {display:block;}
    </style>
  </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="#">web教程</a>
                <ul>
                <li><a href="#">新手入门</a></li>
                <li><a href="#">视频教程</a></li>
                <li><a href="#">常见问题</a></li>
                </ul>
            </li>
            <li><a href="#">web实例</a></li>
            <li><a href="#">常用代码</a></li>
        </ul>
    </div>
  </body>
</html>

 

posted @ 2015-02-02 14:16  雪中飞雁  阅读(85)  评论(0)    收藏  举报