利用CSS的方法写出纵向下拉菜单，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.nav{
width: 500px;
height: 30px;
position: relative;
background-color: goldenrod;
/*margin: 200px;*/
z-index: 20;
}
.nav-btn{
float: left;
width: 100px;
max-height: 30px;
text-align: center;
line-height: 30px;
font-size: 14px;
overflow: hidden;
transition: 0.5s;
position: relative;
}
.nav-btn:hover{
cursor: pointer;
background-color: green;
color: white;
/*overflow: visible;*/
max-height: 300px;
}
.nav-btn ul{
list-style: none;
background-color: green;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-btn">首页 </div>
<div class="nav-btn">HTML
<ul>
<li>基本标签</li>
<li>表单元素</li>
<li>表格</li>
<li>框架</li>
</ul>
</div>
<div class="nav-btn">CSS
<ul>
<li>布局</li>
<li>选择器</li>
<li>属性</li>
<li>引用方式</li>
</ul>
</div>
<div class="nav-btn">JavaScript
<ul>
<li>基本语法</li>
<li>函数</li>
<li>数组</li>
<li>循环</li>
<li>顺序语句</li>
<li>DOM</li>
<li>BOM</li>
</ul>
</div>
<div class="nav-btn">PHP
<ul>
<li>CMS</li>
<li>面向对象</li>
<li>ThinkPHP</li>
</ul>
</div>
</div>
<p style="position: absolute;z-index: 10;">123123123123123123123</p>
<div>asdfadsadfasdfasdfasdf</div>
</body>
</html>
