HTML5課上(xià)學到的下拉菜單，小白代碼奉上ヾ(◍°∇°◍)ﾉﾞ。
基礎版
首先要理解我們最終需要的效果是什麼：
- 父級菜單
顯示的時候，子級菜單隱藏 - 鼠標移動到含有子元素的
li標籤時，該標籤顯示其子元素(菜單)
代碼如下（注意理解：核心CSS在 16~21 行）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{list-style: none;}
a{
text-decoration: none;
background: azure;
border: 2px solid #2196F3;
}
/* 上面是無關的樣式代碼，略微修飾作用 */
/* 下級菜單的ul是上級菜單ul li的子元素，子元素相對父元素定位，令父元素定位方式爲relative，子元素爲absolute */
ul li{position: relative;width: 300px;}
ul li ul{position: absolute;display: none;} /*隱藏二級菜單*/
/* 運用display：block&none 來進行層級顯示*/
ul li:hover ul{display:block;} /*鼠標移動到一級菜單的li時顯示二級菜單*/
ul li:hover ul li ul{display: none;} /*隱藏三級菜單*/
ul li:hover ul li:hover ul{display:block;} /*鼠標移動到二級菜單的li時顯示三級菜單*/
/*對於顯示問題，這裏就是運用display的none和block在其父子元素之間的交替使用。*/
/*display:block作用是清除之前被display:none隱藏的效果，使元素重新顯示出來。*/
</style>
</head>
<body>
<ul>
<li><a href="#">一級菜單</a></li>
<li><a href="#">一級菜單</a></li>
<li><a href="#">一級菜單</a>
<ul>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a>
<ul>
<li><a href="#">三級菜單</a></li>
<li><a href="#">三級菜單</a></li>
<li><a href="#">三級菜單</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
優化版
在第一個代碼的基礎上有所優化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
html{background: deepskyblue;}
nav{margin:30px 50px;float: left;}
a{
text-decoration: none;
background: azure;
border: 2px solid azure;
display: block;
text-align: center;
font-weight: bold;
}
a:hover{background: rgb(157, 255, 0);}
ul li{position: relative;width: 200px;}
ul li ul{position: absolute;display: none;left: 200px;top:0px}
ul li:hover ul{display:block;}
ul li:hover ul li ul{display: none;}
ul li:hover ul li:hover ul{display:block;}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">一級菜單</a></li>
<li><a href="#">一級菜單</a></li>
<li><a href="#">一級菜單</a>
<ul>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a>
<ul> /*三級菜單*/
<li><a href="#">三級菜單</a></li>
<li><a href="#">三級菜單</a></li>
<li><a href="#">三級菜單</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
理解邏輯，就可以再多弄幾級菜單咯。
JS版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
html{background: deepskyblue;}
nav{margin:30px 50px;float: left;}
a{
text-decoration: none;
background: azure;
border: 2px solid azure;
display: block;
text-align: center;
font-weight: bold;
}
a:hover{background: rgb(157, 255, 0);}
ul li{position: relative;width: 200px;}
ul li ul{position: absolute;display: none;left: 200px;top:0px}
</style>
</head>
<body>
<nav>
<ul >
<li><a href="#">一級菜單</a></li>
<li><a href="#">一級菜單</a></li>
<li onmouseover="Show(this)" onmouseout="Hidden(this)"><a href="#">一級菜單</a>
<ul >
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
<li onmouseover="Show(this)" onmouseout="Hidden(this)"><a href="#">二級菜單</a>
<ul>
<li><a href="#">三級菜單</a></li>
<li><a href="#">三級菜單</a></li>
<li><a href="#">三級菜單</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<script>
function Show(obj){
var menu_s = obj.getElementsByTagName("ul")[0];
menu_s.style.display = "block";
}
function Hidden(obj){
var menu_f = obj.getElementsByTagName("ul")[0];
menu_f.style.display = "none";
}
</script>
</body>
</html>
Thanks♪(･ω･)ﾉ