谁能教我一个JS+css+DIV的下拉列表的简易做法

网上搜的那些看不懂，很难在局部实现，而且css做了很多body等不必要的设置，求一个精简版，只要div是块状有个背景颜色就可以了... 网上搜的那些看不懂，很难在局部实现，而且css做了很多body等不必要的设置，求一个精简版，只要div是块状有个背景颜色就可以了展开

 我来答

3个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

电商达人秀

高粉答主

2014-05-19 · 电商领域的一个老炮！

电商达人秀

采纳数：17961 获赞数：148061

向TA提问私信TA

关注

展开全部

<div class="nav">
<ul>
<li><a href="#">家居日用</a>
<div class="down_list">
<ul>
<li><h3>家居用品：</h3></li>
<li><a href="#">餐具</a> <a href="#">厨具用品</a> <a href="#">家居日用品</a></li>
<li><a href="#">创意家居用品</a> <a href="#">日常保健</a></li>
<li><a href="#">沐浴用品</a> <a href="#">修容礼品</a></li>
<li><h3>家纺用品：</h3></li>
<li><a href="#">被子被套</a> <a href="#">蚕丝被</a> <a href="#">床品套件</a></li>
<li><a href="#">毛巾套装</a> <a href="#">收纳搁置</a></li>
</ul>
<ul class="price">
<li><h3>价格分类：</h3></li>
<li><a href="#">50元以下</a></li>
<li><a href="#">50-100元</a></li>
<li><a href="#">500-1000元</a></li>
<li><a href="#">1000-3000元</a></li>
</ul>
</div>
</li>
<li><a href="#">所有礼品</a></li>
<li><a href="#">积分兑换区</a></li>
</ul>
</div>

已赞过 已踩过<

评论收起

zl02655931
推荐于2016-06-18 · TA获得超过363个赞

知道小有建树答主

回答量：420

采纳率：0%

帮助的人：359万

我也去答题访问个人页

关注

展开全部

其实不用js也能做。给个思路，

<li>
    <a href="">列表1
        <div class="">
            <ul><li><a href="">子项1</a></li></ul>
        </div>
    </a>
</li>

要点：1、将div框属性设置为none,

2、将a框属性设置为block;

3、鼠标指向a后，div框属性变成inline-table、或者block;

4、加上过渡属性transition就OK了。效果和JS一样。

更多追问追答

追问

说的详细点呗 有点晕我是这方面小白

追答

思路最重要，你只有理解了才能做出多种样式的导航。而不是单单一个固定的代码。有什么不懂的继续追问吧。

本回答被提问者和网友采纳

已赞过 已踩过<

评论收起

枫落于秋
2014-05-19 · TA获得超过911个赞

知道小有建树答主

回答量：274

采纳率：100%

帮助的人：139万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
#box1{
height:60px;
width:480px;
overflow:hidden;
background:#3F2315;
}
#box1 ul li{
margin:0px;
padding:0px;
height:30px;
color:#B69143;
float: left;
width: 90px;
line-height: 35px;
border-right: 1px solid #1A000D;
list-style-type: none;
text-align:center;
cursor:pointer;
}
#box1 ul li:hover{color:#fff;background:#694628;}
#box2{
margin-top:10px;
clear:both;
height:150px;
width:478px;
border:1px dashed #3F2315;
}
</style>
<script>
function ul1(){
document.getElementById("ul1").style.display="block";
document.getElementById("ul2").style.display="none";
document.getElementById("ul3").style.display="none";
document.getElementById("ul4").style.display="none";
}
function ul2(){
document.getElementById("ul1").style.display="none";
document.getElementById("ul2").style.display="block";
document.getElementById("ul3").style.display="none";
document.getElementById("ul4").style.display="none";
}
function ul3(){
document.getElementById("ul1").style.display="none";
document.getElementById("ul2").style.display="none";
document.getElementById("ul3").style.display="block";
document.getElementById("ul4").style.display="none";
}
function ul4(){
document.getElementById("ul1").style.display="none";
document.getElementById("ul2").style.display="none";
document.getElementById("ul3").style.display="none";
document.getElementById("ul4").style.display="block";
}

</script>
</head>

<body>
<div id="box1">
<ul>
<li onMouseOver="ul1()">游戏</li>
<li onMouseOver="ul2()">旅游</li>
<li onMouseOver="ul3()">爬山</li>
<li onMouseOver="ul4()">逛街</li>
</ul>
</div>
<div id="box2">
<ul id="ul1" style="display:block">
<li>游戏</li>
<li>游戏</li>
<li>游戏</li>
<li>游戏</li>
<li>游戏</li>
<li>游戏</li>
</ul>
<ul id="ul2" style="display:none">
<li>旅游</li>
<li>旅游</li>
<li>旅游</li>
<li>旅游</li>
<li>旅游</li>
</ul>
<ul id="ul3" style="display:none">
<li>爬山</li>
<li>爬山</li>
<li>爬山</li>
<li>爬山</li>
<li>爬山</li>
<li>爬山</li>
</ul>

<ul id="ul4" style="display:none">
<li>逛街</li>
<li>逛街</li>
<li>逛街</li>
<li>逛街</li>
<li>逛街</li>
<li>逛街</li>
</ul>
</div>

</body>
</html>

简单的DEMO，希望能帮到你

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

谁能教我一个JS+css+DIV的下拉列表的简易做法

其他类似问题

为你推荐：