导航下拉菜单 

*{
    margin: 0;
    padding: 0;
    
}
.nva{
    width:800px ;
    height: 40px;
    margin:0 auto;
    margin-top: 20px;
    list-style-type: none;
    border:1px solid gainsboro ;
    background-color: whitesmoke;
}
.nva li{
    float: left;
    width: 80px;
    text-align: center;
    line-height: 40px;
    background-color: whitesmoke;
    color: #000000;
    display: block;
    
}
.nva a{
    
    text-decoration: none;
    display: block;
}
.nva li:hover{
    background-color: red;
    color: white;
    display: block;
    cursor: pointer;
}
.nva li ol li{line-height:30px;font-size: 12px;}

ul,ol{list-style-type: none;}
.nva ol{display: none;}

.nva li:hover ol{display: block;cursor: pointer;}
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/demo5.css" />
    </head>
    <body>

            
        
        <ul class="nva">
            <li herf="#">
                <a href="#">推荐</a>
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ol>
            </li>
            
            <li href="#"><a >新闻</a></li>
            <li href="#"><a >国际</a></li>
            <li href="#"><a >娱乐</a></li>
            <li href="#"><a >视频</a></li>
            <li href="#"><a >财经</a></li>
            <li href="#"><a >体育</a></li>
            <li href="#"><a >军事</a></li>
            <li href="#"><a >汽车</a></li>
            <li href="#"><a >房产</a></li>
        </ul>

    </body>
    
</html>

 

posted on 2018-07-19 20:44  阿衍小同学  阅读(102)  评论(0)  编辑  收藏  举报