abstract：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>css 浮动</title> <meta name="vi
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>css 浮动</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="image/icon.png">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ddd;
}
#nav{
width: 216px;
background: rgb(43, 51, 59);
margin: 20px;
padding: 10px 0px;
border-radius: 5px;
}
#nav ul{
position: relative;
}
#nav li{
list-style: none;
height: 60px;
width: 200px;
padding-left: 16px;
}
#nav li:hover{
background: rgb(107, 113, 118);
}
#nav li:hover dl{
display: block;
}
#nav li a{
color: rgb( 170, 173, 177 );
text-decoration: none;
display: block;
padding: 0 16px;
line-height: 60px;
}
#nav li a span{
float: right;
}
#nav dl{
background: #fff;
padding: 30px;
width: 350px;
height: 260px;
position: absolute;
top: -10px;
right: -410px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
display: none;
}
#nav dl dt{
font-size: 20px;
text-indent: 36px;
padding-bottom: 10px;
width: 280px;
border-bottom: 1px solid #ccc;
}
#nav dl a{
display: inline-block;
width: 100px;
color: #000;
text-align: center
}
#nav dl a:hover{
color: aqua;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href="#">php开发<span>></span></a>
<dl>
<dt>php教程</dt>
<dd><a href="#">图文教程</a><a href="#">视频教程</a></dd>
</dl>
</li>
<li>
<a href="#">前端开发<span>></span></a>
<dl>
<dt>前端开发教程</dt>
<dd><a href="#">图文教程</a><a href="#">视频教程</a></dd>
</dl>
</li>
<li>
<a href="#">服务器开发<span>></span></a>
<dl>
<dt>服务器开发教程</dt>
<dd><a href="#">图文教程</a><a href="#">视频教程</a></dd>
</dl>
</li>
<li>
<a href="#">移动开发<span>></span></a>
<dl>
<dt>移动开发教程</dt>
<dd><a href="#">图文教程</a><a href="#">视频教程</a></dd>
</dl>
</li>
<li>
<a href="#">数据库<span>></span></a>
<dl>
<dt>数据库教程</dt>
<dd><a href="#">图文教程</a><a href="#">视频教程</a></dd>
</dl>
</li>
</ul>
</div>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-01-13 10:34:44
Teacher's summary：background: #fff;, 建议这里写完整: background-color: #fff;, background只用到写复合样式的时候,就是将多个规则写在一行中