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特效之下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

20款jquery下拉导航菜单特效代码分享

css js 下拉菜单会突然消失之谜

二级导航下拉菜单

js之原生下拉菜单

HTML+CSS导航之下拉菜单方法1——JS