网页中一段内容之后只显示三角图片而鼠标移动到或者点击这个三角符号之后变成倒三角，同时隐藏此三角符号，并且显示一个下拉列表出来本人是初学者，不用javascript.只用display元素如何实现
2 回答
已采纳
雾青依
TA贡献5条经验 获得超1个赞
感觉和那种导航差不多，我在这里贴一段导航的代码吧，不美观啊，勿喷
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding:0;
}
#nav{/*把列表符号去掉*/
list-style:none;
}
#nav li ul{/*隐藏下拉内容*/
display:none;
list-style:none;
margin:0px;
}
#nav li{/*定义一级导航样式*/
color:red;
width:200px;
background:yellow;
}
#nav li ul li{/*定义下拉内容样式*/
background:green;
margin-bottom:5px;
}
#nav li:hover{
color:red;
}
#nav li:hover ul{/*鼠标移到一级导航上方的时候显示下拉内容*/
display:block;
}
#sp{
float:right;
}
</style>
</head>
<body>
<ul id="nav">
<li>导航<span id="sp">三角</span>
<ul>
<li>导航一
</li>
<li>导航二
</li>
<li>导航三
</li>
</ul>
</li>
</ul>
<body>
</html>
- 2 回答
- 0 关注
- 1394 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消