css制作黑色经典导航下拉菜单实例

2016-03-21 网页编程网 网页编程网

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航栏下拉菜单</title>
<style>  
*{margin:0;padding:0;}   
ul{   
    list-style-type:none;   
    background-color:#333;   
    overflow:hidden;   
}   
li{   
    float:left;   
}   
li a, .dropbtn{   
    display:inline-block;   
    color:white;   
    text-align:center;   
    padding:14px 16px;   
    text-decoration:none;   
}   
  
li a:hover, .dropdown:hover .dropbtn{   
    background-color:#111;   
}   
  
.dropdown{   
    display:inline-block;   
}   
  
.dropdown-content{   
    min-width:200px;   
    background-color:#F9F9F9;   
    position:absolute;   
    display:none;   
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);   
}   
  
.dropdown-content a{   
    color:black;   
    padding:12px 16px;   
    text-decoration:none;   
    display:block;   
}   
  
.dropdown-content a:hover{   
    background-color:#F1F1F1;   
}   
  
.dropdown:hover .dropdown-content{   
    display: block;   
}   
</style>  
</head>  
<body>  
<ul>  
    <li><a href="#shop" class="active">在线商城</a></li>  
    <li><a href="#news">产品展示</a></li>  
    <div class="dropdown">  
        <a href="#" class="dropbtn">下拉菜单</a>  
        <div class="dropdown-content">  
            <a href="#">子菜单 1</a>  
            <a href="#">子菜单 2</a>  
            <a href="#">子菜单 3</a>  
        </div>  
    </div>  
</ul>
</body>
</html>

阅读原文

阅读 4517

123 显示电脑版