摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>常用的导航栏案例</title>
<!-- css样式 -->
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
ul , li {
margin: 0px;
padding: 0px;
list-style: none;
}
header {
background:#efefef;
}
.nav {
width:1200px;
margin: 0px auto;
height:37px;
font-size: 12px;
color: #999;
line-height: 37px;
}
.nav > div ul > li{
float: left;
margin-right: 24px;
}
.nav a {
color:#999;
position: relative;
text-decoration: none;
}
.nav a ul {
border:1px solid #e0e0e0;
display: none;
color:#999;
width:100px;
}
.nav a ul li{
clear: none;
margin: 0px;
width:100%;
text-align: center;
}
.nav a:hover ul {
display:inline-block;
position: absolute;
background: #fff;
}
.nav a:hover{
display: block;
color:#f00;
}
.nav_left {
float:left;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header>
<div class="nav">
<!-- 导航栏左边的 -->
<div class="nav_left">
<ul>
<li>喵，欢迎来到天猫</li>
<li>
<a href="#">请登录
<div class="clear"></div>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
</li>
<li><a href="#">免费注册</a></li>
</ul>
</div>
<!-- 导航栏右边的 -->
<div class="nav_right"></div>
</div>
</header>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-01 22:59:15
老师总结：代码复制的时候注意格式和换行,这么直接看辣眼睛啊, 继续加油吧
