加载页面时显示一级列表，鼠标悬停时显示二级列表，离开时隐藏。
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list</title>
<link rel="stylesheet" href="list.css">
</head>
<body>
<ul id="title">
<li>首页</li>
<li>公司介绍
<ul class="title2">
<li>公司发展</li>
<li>公司文化</li>
</ul>
</li>
<li>产品介绍
<ul class="title2">
<li>大数据</li>
<li>人工智能</li>
</ul>
</li>
<li>联系我们</li>
</ul>
</body>
</html>
加上一部分简单的样式：
CSS代码如下：
ul{
list-style: none;
}
#title li{
float: left;
width: 100px;
text-align: center;
}
.title2 li{
clear: both;
margin-left: -40px;
display: none;
}
/*
#title:hover li .title2 li{
display: block;/*放在任意一级标签显示所有二级标签
}*/
#title li:hover .title2 li{
display: block;/*放在对应一级标签显示对应二级标签*/
}
效果图如下：
2771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
