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♪(･ω･)ﾉ