首页 > 代码库 > JS特效之下拉菜单
JS特效之下拉菜单
<style>
.btn{ background-color:#06C; 
color:#FFF;
padding:16px;
font-size:16px;
border:none;
cursor:pointer;
}
.sel{ position:relative;
display:inline-block;
}
.next{ display:none;
position:absolute;
background-color:#F00;
min-width:100px;
}
.next a{
color:#000;
padding:12px 16px;
text-decoration:none;
display:block;
}
.next a:hover{
background-color:#0F3;}
.sel:hover .next{
display:block;
}
.sel:hover .btn{
background-color:#936;}
</style>
</head>
<body>
<div class="sel">
<button class="btn">下拉菜单</button>
<div class="next">
<a>11111</a>
<a>22222</a>
<a>33333</a>
<a>44444</a>
<a>55555</a>
<a>66666</a>
</div>
</div>
JS特效之下拉菜单