-
dropdown和dd是一样大的
-
留个左侧红竖线用什么m?p?
-
li和a,可以对谁指定color
-
字体图标 必须包含哪两个部分
html
/*dropdown和dt是一样大的*/
<div class="dropdown">
<dt class="dt">全部商品分类</dt>
<dd class="dd">
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机、</a><a href="#">数码、</a><a href="#">通信</a></li>
<li><a href="#">电脑、</a><a href="#">办公</a></li>
<li><a href="#">家居、</a><a href="#">家具、</a><a href="#">家装、</a><a href="#">厨具</a></li>
<li><a href="#">男装、</a><a href="#">女装、</a><a href="#">童装、</a><a href="#">内衣</a></li>
<li><a href="#">个护化妆、</a><a href="#">清洁用品、</a><a href="#">宠物</a></li>
<li><a href="#">靴靴、</a><a href="#">箱包、</a><a href="#">珠宝、</a><a href="#">奢侈品</a></li>
<li><a href="#">运动户外、</a><a href="#">钟表</a></li>
<li><a href="#">汽车、</a><a href="#">汽车用品</a></li>
<li><a href="#">母婴、</a><a href="#">玩具乐器</a></li>
<li><a href="#">食品、</a><a href="#">酒类、</a><a href="#">生鲜、</a><a href="#">特产</a></li>
<li><a href="#">医疗保健</a></li>
<li><a href="#">图书、</a><a href="#">音像、</a><a href="#">电子书</a></li>
<li><a href="#">彩票、</a><a href="#">旅行、</a><a href="#">充值、</a><a href="#">票务</a></li>
<li><a href="#">理财、</a><a href="#">众筹、</a><a href="#">白条、</a><a href="#">保险</a></li>
</ul>
</dd>
</div>
common.css
.nav {
height: 47px;
border-bottom: 2px solid #b1191a;
}
.nav .dropdown {
margin-top: 2px; /*否则压线了哦*/
float: left;
width: 210px;
height: 47px;
background-color: #b1191a;
}
.nav .dropdown dt {
width: 100%;
height: 100%;
line-height: 47px;
text-align: center;
color: #fff;
font-size: 16px;
}
.nav .dropdown dd { /*多出盒子的下方大盒子*/
width: 100%;
height: 465px;
background-color: #c81623;
}
/*↓ 重头戏*/
.nav .dropdown dd ul li {
position: relative;
height: 31px;
line-height: 31px;
margin-left: 2px; /*留个左侧红竖线*/
}
.nav .dropdown dd ul li:hover {
background-color: #fff;
}
.nav .dropdown dd ul li:hover a { /*attention*/
color: #c81623;
}
.nav .dropdown dd ul li a { /*无法对li指定颜色,必须是li里面的a,a里面有文字???*/
color: #fff;
padding-left: 10px;
}
/* dropdown-字体图标 */
.nav .dropdown dd ul li::after {
content: "\e809";
font-family: "iconfont";
font-size: 1px;
color: #fff;
position: absolute;
right: 5px;
}