摘要：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>css 浮動(dòng)</title> <meta name="vi
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>css 浮動(dòng)</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開(kāi)發(fā)<span>></span></a>
<dl>
<dt>php教程</dt>
<dd><a href="#">圖文教程</a><a href="#">視頻教程</a></dd>
</dl>
</li>
<li>
<a href="#">前端開(kāi)發(fā)<span>></span></a>
<dl>
<dt>前端開(kāi)發(fā)教程</dt>
<dd><a href="#">圖文教程</a><a href="#">視頻教程</a></dd>
</dl>
</li>
<li>
<a href="#">服務(wù)器開(kāi)發(fā)<span>></span></a>
<dl>
<dt>服務(wù)器開(kāi)發(fā)教程</dt>
<dd><a href="#">圖文教程</a><a href="#">視頻教程</a></dd>
</dl>
</li>
<li>
<a href="#">移動(dòng)開(kāi)發(fā)<span>></span></a>
<dl>
<dt>移動(dòng)開(kāi)發(fā)教程</dt>
<dd><a href="#">圖文教程</a><a href="#">視頻教程</a></dd>
</dl>
</li>
<li>
<a href="#">數(shù)據(jù)庫(kù)<span>></span></a>
<dl>
<dt>數(shù)據(jù)庫(kù)教程</dt>
<dd><a href="#">圖文教程</a><a href="#">視頻教程</a></dd>
</dl>
</li>
</ul>
</div>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-01-13 10:34:44
老師總結(jié)：background: #fff;, 建議這里寫(xiě)完整: background-color: #fff;, background只用到寫(xiě)復(fù)合樣式的時(shí)候,就是將多個(gè)規(guī)則寫(xiě)在一行中