摘要：下拉菜单在导航布局中特别常用，主要使用ul li来进行实现，在操作的时候需要注意位置定位和鼠标移动的状态<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <
下拉菜单在导航布局中特别常用，主要使用ul li来进行实现，在操作的时候需要注意位置定位和鼠标移动的状态
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘宝网导航条实例</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/fontawesome.min.css"> </head> <body> <div> <div> <div> <a href="">中国大陆 <i class=" fa fa-angel-down"></i></a> <a href="" style="color: #FF5000;">亲,请登录</a> <a href="">免费注册</a> <a href="">手机逛淘宝</a> </div> <div> <a href="">我的淘宝 <i class=" fa fa-angel-down"></i> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </a> <a href=""><span ></span>购物车<i class=" fa fa-angel-down"></i></a> <a href="">收藏夹<i class=" fa fa-angel-down"></i></a> <a href="">商品分类</a> <a href="">卖家中心<i class=" fa fa-angel-down"></i></a> <a href="">联系客服<i class=" fa fa-angel-down"></i></a> <a href="">网站导航<i class=" fa fa-angel-down"></i></a> </div> </div> </div> </body> </html>
* {
margin: 0px;
padding: 0px
}
a{
text-decoration: none; /*取消下划线*/
color: #6c6c6c;
}
.clear {
clear: both;
}
.header {
width: 100%;
height: 40px;
background-color: #F5F5F5;
}
.content {
width: 1200px;
height: 40px;
margin: 0px auto;
line-height: 40px;
}
.content a:hover{
color: #FF5000;
}
.content_left {
width: 400px;
height: 40px;
float: left;
}
.content_left a{
margin-right: 5px;
}
.content_right {
width: 600px;
height: 40px;
/* background-color: pink;*/
float: right;
}
.left_a{
display: inline-block;
height: 40px;
width: 90px;
text-align: center;
position: relative;
}
.left_a:hover{
background-color: #fff;
}
.left_a ul{
border: 1px solid #F5F5F5;
display: none;
border-top: none;
}
.left_a:hover ul{
display: block;
position: absolute;
width: 110px;
};
color: #6c6c6c;
.left_a ul li{
list-style: none
height: 30px;
line-height: 30px;
text-align: left;
padding: 0px 3px;
margin: 5px 0px;
}
.left_a ul li:hover{
background-color: #F5F5F5;
}
批改老师：灭绝师太批改时间：2019-02-14 09:07:02
老师总结：完成的不错;建议:带有二级下拉菜单的导航不建议用a链接嵌套哦
