abstract:css实战 php中文网左侧导航 css实战 php中文网左侧导航 *{
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;
}
Correcting teacher:天蓬老师Correction time:2019-01-13 09:47:34
Teacher's summary:写得不错, 但是标签的嵌套太深了 , 应该还有简化的可能, 可以更研究一下