search

lcgyh / myDocs

0 stars 0 forks source link

css实现下拉导航 #38

Open lcgyh opened 6 years ago

lcgyh commented 5 years ago 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
    <link rel="stylesheet" href="styles/lianxi.css">
    <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
    <script src="scripts/lianxi.js"></script>
    <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
    <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
    <style type='text/css'>
        .nav{width:500px;height:200px;margin:100px auto 0 auto;text-align:center;}
        .nav ul{float:left;}
        .nav ul li{float:left;width:60px;line-height:40px;position:relative;background-color:#F8F8F8;}
        .nav .nav_first{border-left:1px dotted #EAEAEA;}
        .nav ul li a{color:#666;display:block;border:1px dotted #EAEAEA;border-left:none;}
        .nav ul li a:hover{color:#000;}  
        .nav ul li .active{background-color:#D8450B;border:1px solid #D8450B;color:#EEE;} 
        .nav ul li .active:hover{background-color:#D8450B;color:#EEE;}
        .nav ul li:hover .sub_nav{ display:block;  }
        .nav .sub_nav{position:absolute;width:90px;display:none;left:-1px;  }
        .nav .sub_nav li{text-align:left;width:100px;   }
        .nav .sub_nav b{ width:15px;background-color:#CCC;display:inline-block;margin-right:15px; }
        .nav .sub_nav li a{border-top:none;}
        .nav .sub_nav li .sub_nav_last{ border-bottom:none;}
         .nav .sub_nav li a:hover b{background-color:#999; }
        .nav .caret { display: inline-block;width: 0;height: 0;vertical-align: middle; border-top: 4px dashed; border-top: 4px solid transparent;border-right: 4px solid transparent;border-left: 4px solid transparent;border-top-color: #777777; margin-left:5px; }
    </style>
</head>
<body>
     <div id="nav" class="nav">
            <ul>
                <li><a href="" class="active nav_first">首页</a></li> 
                <li><a href="">博文<div class="caret"></div></a>                
                    <ul class="sub_nav">
                        <li><a href="" class="sub_active"><b>&nbsp;</b>生活随记</a></li>
                        <li><a href=""><b>&nbsp;</b>影视推荐</a></li>
                        <li><a href=""><b>&nbsp;</b>美文欣赏</a></li>
                        <li><a href=""><b>&nbsp;</b>互联杂谈</a></li>
                        <li><a href=""><b>&nbsp;</b>资源分享</a></li>
                    </ul>
                </li> 
                <li><a href="">音乐<div class="caret"></div></a>
                    <ul class="sub_nav">
                        <li><a href="" class="sub_active"><b>&nbsp;</b>生活随记</a></li>
                        <li><a href=""><b>&nbsp;</b>影视推荐</a></li>
                        <li><a href=""><b>&nbsp;</b>美文欣赏</a></li>
                        <li><a href=""><b>&nbsp;</b>互联杂谈</a></li>
                        <li><a href="" class="sub_nav_last"><b>&nbsp;</b>资源分享</a></li>
                    </ul>
                </li> 
                <li><a href="">说说</a></li>  
                <li><a href="">相册</a></li>  
                <li><a href="">留言</a></li>  
            </ul>
        </div>    
</body>
</html>