<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为时间
基本上就是这个思路。
html做导航栏步骤如下：1、用Dreamweaver新建一个HTML文件；
2、按ctrl+s先保存，以防突然断电数据丢失；
3、修改title为html+css实现横向导航；
4、新建一个divid为“a”，添加ulli标签；
5、在li中添加自己想要的文字并调整好文字间距，按F12预览；6、首先去掉字体前面的小黑点。
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
这个用jQuery就的toggle函数可以实现。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="
>
<style>
.main
{
list-style: none
float: left
margin-left: 20px
}
.main li
{
list-style: none
text-align: left
margin-left: -40px
}
.main ul
{
display: none
}
.main a
{
text-decoration: none
}
.main li a
{
text-decoration: none
}
</style>
</head>
<body>
<ul id="uid">
<li class="main"><a href="#">菜单一</a>
<ul>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单二</a>
<ul>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单三</a>
<ul>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
</ul>
</li>
</ul>
</body>
<script >
$(document).ready(
function () {
$(".main").hover(function () {
$(this).children("ul").toggle()
})
}
)
</script>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）