摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.main li{
float: left;
width: 100px;
height: 20px;
border: 1px solid #FD8888;
}
.show{
display: none;
}
.show li{
width: 40px;
height: 30px;
border: 1px solid black;
float: left;
}
.main li:hover .show{
display: inline;
}
</style>
</head>
<body>
<ul class="main">
<li>
1
<br />
<ul class="show">
<li>Q</li>
<li>E</li>
</ul>
</li>
<li>
2
<br />
<ul class="show">
<li>W</li>
<li>E</li>
</ul>
</li>
<li>
3
<br />
<ul class="show">
<li>E</li>
<li>E</li>
</ul>
</li>
<li>
4
<br />
<ul class="show">
<li>R</li>
<li>E</li>
</ul>
</li>
<li>
5
<br />
<!--隐藏内容-->
<ul class="show">
<li>T</li>
<li>E</li>
</ul>
</li>
<li>
6
<br />
<ul class="show">
<li>Y</li>
<li>E</li>
</ul>
</li>
</ul>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-08 16:26:47
老师总结：太简单啦！可以带点样式呀，原理已经掌握，可以选择一点案例练练手
