摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘寶導(dǎo)航</title>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘寶導(dǎo)航</title> <link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" type="text/css" href="CSS\font-awesome-4.7.0\css\font-awesome.min.css"> </head> <body> <div> <div> <div> <a href="">中國大陸 <i class="fa fa-angle-down"></i></a> <a href="" style="color: #FF5000;">親,請登陸</a> <a href="">免費注冊</a> <a href="">手機(jī)逛淘寶</a> </div> <div> <a href="">我的淘寶<i class="fa fa-angle-down"></i> <ul> <li>已買到的寶貝</li> <li>我的足跡</li> </ul> </a> <a href=""><span class="fa fa-cart-plus" style="color: #FF5000;"></span> 購物車</a> <a href=""><span class="fa fa-star"></span> 收藏夾<i class="fa fa-angle-down"></i> <ul> <li>懶</li> <li>懶!</li> </ul> </a> <a href="">商品分類</a> <a href="">賣家中心<i class="fa fa-angle-down"></i></a> <a href="">聯(lián)系客服<i class="fa fa-angle-down"></i></a> <a href=""><span class="fa fa-align-justify"></span> 網(wǎng)站導(dǎo)航<i class="fa fa-angle-down"></i> <ul> <li>懶</li> <li>懶!</li> </ul> </a> </div> </div> <div></div> </div> </body> </html>
*{
margin:0px;
padding:0px;
}
a{
text-decoration: none;
font-size:13px;
color:#6c6c6c;
}
.clear{
clear:both;
}
.header{
width: 100%;
/*height:40px;*/
background-color:#F5F5F5;
}
.header_content{
width:1200px;
/*height:40px;*/
margin:0px auto;
line-height:40px;
}
.header_left{
/*width:300px;*/
height:40px;
float:left;
}
.header_left a{
margin-right:5px;
}
.header_content a:hover{
color:#FF5000;
}
.header_right{
/* width:600px;*/
height:40px;
/* background-color:pink;*/
float:right;
}
.header_a{
display:inline-block;
height:40px;
width:90px;
text-align:center;
position: relative;
}
.header_a:hover{
background-color:#fff;
}
li{
list-style:none;
}
.header_a ul{
border:1px solid #F5F5F5;
display:none;
}
.header_a:hover ul{
display:block;
position:absolute;
width:100px;
border-top:none;
}
.header_a ul li{
color:#6c6c6c;
height:30px;
line-height:30px;
text-align:left;
padding:0px 3px;
margin:5px 0px;
}
.header_a ul li:hover{
background: #F5F5F5;
}利用偽屬性hover與display屬性配合實現(xiàn)下拉框
批改老師：天蓬老師批改時間：2019-06-27 13:02:31
老師總結(jié)：下拉菜單 , 用javascript事件來做也是不錯的, 可以試試看