html 导航条下拉列表怎么做
发布网友
发布时间：2022-04-21 07:08
共2个回答
热心网友
时间：2022-04-07 12:11
先把导航条做出来，然后在每个想有下拉列表的栏目下，画出来下拉的选项，格式一般为
<div><ul><li><a>1</a></li><li><a>2</a></li></ul></div>，然后调好样式。并将div的style设置，display=none
然后获取到你的栏目，添加鼠标事件onMouseover或onclick都行。事件中添加jquery代码。
$("要下来的那个div的选择器").slideDown(100); 100为时间
基本上就是这个思路。
热心网友
时间：2022-04-07 13:29
必许要用css样式
1、首先先用一个列表样式包裹子导航
<ul class="nav">
<li><a href="Untitled-1.html">培训课程</a>
<ol>
<li><a href="#">课程一</a></li>
<li><a href="#">课程二</a></li>
<li><a href="#">课程三</a></li>
<li><a href="#">课程四</a></li>
<li><a href="#">课程五</a></li>
<li><a href="#">课程六</a></li>
</ol>
2、利用css样式隐藏除主导航外的其他子导航
.nav li ol{ list-style:none; width:73px; height:0px; overflow:hidden; position:absolute; background:#55c230 }
3、再利用css样式设置鼠标悬停样式即可
.nav li:hover ol{ height:180px;transition: height 1s;
}
