導航下拉選單Css實現
阿新 • • 發佈：2019-02-07
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin: 0px; /*去掉全部間隙間隔*/
padding: 0px;
}
.div {
width: 450px;
height: 40px;
background: #eee; /*灰色背景*/
margin: 0px auto; /*瀏覽器自適應*/
}
.dropbtn,.drop-bt {
list-style: none; /*去掉列表樣式(小圓點)*/
}
.dropdown {
float: left; /*左浮動*/
position: relative; /*****一級選單相對定位*/
line-height: 40px; /*水平居中*/
text-align: center; /*垂直居中*/
}
a {
text-decoration: none; /*去掉超連結的下劃線*/
display: block; /*將a行內元素轉為塊級元素*/
width: 90px;
height: 40px;
}
a:hover {
color: #fff;
background: #666;
}
.drop {
float: right;
background-color: #eee;
margin-top: 2px;
}
.dropbtn {
position: absolute; /******二級選單絕對定位*/
top: 40px; /*向下偏移40px*/
display: none; /*預設狀態下:滑鼠離開隱藏;*/
min-width: 90px; /*最小寬度*/
}
.drop a:hover {
background-color: #06F;
}
.dropdown:hover .dropbtn { /**滑鼠滑過一級選單時顯示二級選單**/
display: block;
}
</style>
</head>
<body>
<div class="div">
<ul class="drop-bt">
<li class="dropdown"><a href="#"><h3>首頁</h3></a></li>
<li class="dropdown" id="dropdown"><a href="#">課程大廳</a>
<ul class="dropbtn">
<li class="drop"><a href="#">Java</a></li>
<li class="drop"><a href="#">C++</a></li>
<li class="drop"><a href="#">PHP</a></li>
<li class="drop"><a href="#">Ios</a></li>
<li class="drop"><a href="#">C</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">學習中心</a></li>
<li class="dropdown"><a href="#">經典案例</a>
<ul class="dropbtn">
<li class="drop"><a href="#">案例解析</a></li>
<li class="drop"><a href="#">案例詳解</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">關於我們</a></li>
</ul>
</div>
</body>
</html>