作业:完成下拉菜单案例

.2019-06-27 12:37:22

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>淘宝导航</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="">中国大陆&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
            <a href="" style="color: #FF5000;">亲,请登陆</a>
            <a href="">免费注册</a>
            <a href="">手机逛淘宝</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>&nbsp;&nbsp;购物车</a>
            <a href=""><span class="fa fa-star"></span>&nbsp;&nbsp;收藏夹<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="">联系客服<i class="fa fa-angle-down"></i></a>
            <a href=""><span class="fa fa-align-justify"></span>&nbsp;&nbsp;网站导航<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属性配合实现下拉框

作业:完成下拉菜单案例

最新手记推荐

全部回复(0)我要回复