求助，隐藏式下拉列表怎么做 - css3吧

level 3

做马桶的诱惑楼主

就是放光标放到一个li上，自动出现一个列表

2018年06月01日 08点06分 1

level 1

前端Skyler

用无序列表

2018年07月02日 15点07分 2

level 1

前端Skyler

hover属性

2018年07月02日 15点07分 3

level 1

峰峰哟😂

列表下再套一个列表将子列表设置成隐藏

2018年07月12日 03点07分 4

level 1

土豆打奥特曼

先写好列表的样式，然后display:none，然后给个hover{display,block}

2018年08月07日 09点08分 5

level 3

哈达波斯王💋

配合脚本，或者伪类

2019年02月03日 15点02分 6

level 8

zyblucker

css实现方法以及js实现方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="a">我的当当</li>
<li>我的收藏</li>
<li>我的凌平咯</li>
<li>我的评论</li>
<li>我的余额</li>
</ul>
<style type="text/css">
ul .a {
display:block!important;
}
ul li:not(:first-child) {
display:none;
}
ul:hover li{
display:block;
}
</style>
</body>
</html>

2021年05月10日 07点05分 8

level 8

zyblucker

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
li{
width: 80px;
height: 30px;
}
#under li{
background-color: aqua;
list-style: none;
float: left;
margin-right: 35px;
}
</style>
<ul>
<li id="list">
<a id="link" href="#">第一个</a>
<ul id="under" style="display: none">
<li>隐藏1</li>
<li>隐藏2</li>
<li>隐藏3</li>
</ul>
</li>
</ul>
<script>
window.onload = function (){
var li=document.getElementById("list")
var under = document.getElementById('under');
var a = document.getElementById('link');
li.onmouseover = function (){
under.style.display = 'block';
under.style.background = 'yellow';
};
li.onmouseout = function hide(){
under.style.display = 'none';
a.style.background = '#f1f1f1';
};
};
</script>
</body>
</html>

2021年05月10日 07点05分 9