JS特效之下拉菜单
Posted 雾若晨曦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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特效之下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章