下拉菜单
*{
padding: 0px;
margin: 0px;
}
.nav{
width: 500px;
height: 35px;
border: 1px solid #7FFFD4;
position: absolute;
top: 0px;
left: 0px;
}
.nav-title{
width: 100px;
max-height: 35px;
text-align: center;
line-height: 35px;
float: left;
background-color: #7FFF00;
font-size: 20px;
overflow: hidden;
}
.nav-title:hover{
background-color: #DC143C;
cursor: pointer;
max-height: 500px;
}
.nav-title ul{
/*list-style: none;*/
text-align: center;
}
.nav-title li{
width: 100px;
height: 35px;
text-align: center;
}
.nav-title li:hover{
background-color: aqua;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-title">首页</div>
<div class="nav-title">花魂
<ul>
<li>落岩</li>
<li>神迹</li>
<li>幸运</li>
<li>弱火</li>
<li>法波</li>
</ul>
</div>
<div class="nav-title">龙须
<ul>
<li>冲击</li>
<li>必杀</li>
<li>敏捷</li>
<li>弱雷</li>
</ul>
</div>
<div class="nav-title">龙女
<ul>
<li>再生</li>
<li>幸运</li>
<li>剑气</li>
</ul>
</div>
<div class="nav-title">蝴蝶
<ul>
<li>神迹</li>
<li>幸运</li>
</ul>
</div>
</div>
</body>
