网页设计中如何使用DIV+CSS实现下拉展示内容?

发布网友发布时间：2022-04-30 19:40

共2个回答

热心网友时间：2022-04-20 13:49

<div id=“#mainbox”>
<ul>
<li><a hre="#">添加数据</a></li>
<div class="innerbox"><a href="#">图片</a><a href="#">新闻</a><a href="#">产品</a></di>
</ul>
</div>

css设置：
#mainbox{ width:400px;height:quto; margin:0px auto;}
ul{ list-style:none;}
li{list-style:none;width:100px;}
.innerbox{display:none}
#mainbox ul li a:hover div{display:block} [_______只有css3支持.]
下面的方法用到jquery
<script>jquery1.7min.js</script>
<script>
$(function(){

$("#mainbox li").toggle({function(){
$(".innerbox").show()
},function(){
$(".innerbox").hide()

})

})
不懂得话可以问我

</script>追问

这是我按你那CSS代码做的，做好后没有效果，只有一个添加数据四个字，点击没反应？

追答是的，我的代码写错了。我写的是鼠标滑过的效果。我修改了下代码，可以运行，（ie7以上可以运行哦）

添加数据

图片新闻产品

重载数据

#mainbox {
width:400px;
height:quto;
margin:0px auto;
}
ul {
list-style:none;
}
li {
list-style:none;
width:100px; float:left;
}
.innerbox {
display:none
}
li:hover div.innerbox {
display:block
}

楼上兄弟既然写出来了，我就不写了。至于点击的效果，
你要是懂jquery的话，一个函数toggle（）就解决了。

热心网友时间：2022-04-20 15:07

你给的分太少了，如果多一点我就帮你写了。