css如何寫二級下拉式選單
- 藏色散人原創
- 2021-01-04 09:27:204004瀏覽
css寫二級下拉選單的方法：先建立一個HTML範例檔案；然後使用css的display屬性控制二級下拉選單的顯示與否；最後透過瀏覽器查看運行效果即可。
本教學操作環境：Dell G3電腦、Windows7系統、Chrome76.0&&CSS3版本。
推薦：《css影片教學》
純CSS實作二級導航下拉選單
想法：
使用css的display屬性控制二級下拉式選單的顯示與否。當滑鼠移至一級導航選單的li標籤時，顯示二級導航選單的ul標籤。由於實作起來比較簡單，所以這裡直接給了參考程式碼。
純CSS二級導覽下拉選單代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" content="text/html" http-equiv="content-type">
<title>纯css二级导航下拉菜单</title>
<meta name="keyword" content="关键字">
<meta name="description" content="描述">
<style type="text/css">
*{margin: 0;padding: 0;}
#bg{background: red;width: 100%;height: 35px;}
nav{height: 35px;width: 1000px;margin: 0 auto;}
nav ul li{list-style-type:none;float: left}
nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;
text-align: center;color:white;font-fimily:微软雅黑;}
nav ul li ul li{float: none}
nav ul li ul li a{color:black}
nav ul li ul{display: none;}
nav ul li:hover ul{display: block;}
</style>
</head>
<body>
<div id="bg">
<nav>
<ul>
<li><a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>運行效果:
以上是css如何寫二級下拉式選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn