摘要：<!DOCTYPE html> <html> <head> <title>京东导航制作</title> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
<!DOCTYPE html>
<html>
<head>
<title>京东导航制作</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-size: 12px;
}
a {
text-decoration: none;
color: #666;
}
.font-we {
font-weight: 700;
}
.clear {
clear: both;
}
.header {
background: #e3e4e5;;
height: 30px;
line-height: 30px;
}
.nav {
width: 768px;
margin: 0px auto;
color: #666;
}
.nav_left {
float: left;
}
.nav_left i {
color: #f10215;
}
.nav_left span {
padding-left: 5px;
}
.nav_right {
float: right;
}
.nav_right ul {
list-style: none;
}
.nav_right ul li {
float: left;
position: relative;
}
.pad {
padding: 0 7px;
}
.nav_right ul li span {
color: #f10215;
padding-left: 5px;
}
.nav_right_color999 {
color: #999;
}
.spacer {
width: 1px;
margin: 11px 5px 0;
padding: 0;
background: #ccc;
height: 10px;
overflow: hidden;
}
.hover_bg:hover {
background: #fff;
border-left: solid #ccc 1px;
border-right: solid #ccc 1px;
}
.dis {
display: none;
}
.hover_bg:hover .dis {
display: block;
background: #fff;
border: solid #ccc 1px;
border-top: none;
width:160px;
margin-left: -8px;
}
.dis {
position: absolute;
}
.dis ul li{
float: left;
padding: 0 7px;
}
</style>
</head>
<body>
<div class="header">
<div class="nav">
<div class="nav_left">
<i class="fa fa-map-marker"></i><span class="
nav_right_color999">安徽</span>
</div>
<div class="nav_right">
<ul>
<li class="pad"><a href="">你好，请登录 <span>免费注册</span></a></li>
<li class="spacer"></li>
<li class="pad"><a href="">我的订单</a></li>
<li class="spacer"></li>
<li class="pad hover_bg"><a href="">我的京东<i class="fa fa-angle-down l
nav_right_color999"></i></a>
<ul class="dis">
<ul>
<li>待处理订单</li>
<li>消息</li>
</ul>
<ul>
<li>返修退换货</li>
<li>我的问答</li>
</ul>
<ul>
<li>降价商品</li>
<li>我的关注</li>
</ul>
<ul>
<li>我的京东</li>
<li>我的白条</li>
</ul>
<ul>
<li>我的优惠券</li>
<li>我的理财</li>
</ul>
</ul>
</li>
<li class="spacer"></li>
<li class="pad"><a href="">京东会员</a></li>
<li class="spacer"></li>
<li class="pad hover_bg"><a href="">企业采购<i class="fa fa-angle-down nav_right_color999"></i></a>
<ul class="dis">
<ul>
<li>企业购</li>
<li>商用场景管</li>
</ul>
<ul>
<li>工业卡</li>
<li>礼品卡</li>
</ul>
</ul>
</li>
<li class="spacer"></li>
<li class="pad hover_bg nav_right_color999">客户服务<i class="fa fa-angle-down"></i>
<ul class="dis">
<ul>
<li class="font-we">客户</li>
</ul>
<div class="clear"></div>
<ul>
<li>帮助中心</li>
<li>售后服务</li>
</ul>
<ul>
<li>在线客服</li>
<li>意见建议</li>
</ul>
<ul>
<li>电话客服</li>
<li>客服邮箱</li>
</ul>
<ul>
<li>金融咨询</li>
<li>全球客服购</li>
</ul>
<ul>
<li class="font-we">商户</li>
</ul>
<div class="clear"></div>
<ul>
<li>合作招商</li>
<li>学习中心</li>
</ul>
<ul>
<li>商家后台</li>
<li>京麦工作台</li>
</ul>
<ul>
<li>商家帮助</li>
<li>规则平台</li>
</ul>
</ul>
</li>
<li class="spacer"></li>
<li class="pad hover_bg nav_right_color999">网站导航<i class="fa fa-angle-down"></i></li>
<li class="spacer"></li>
<li class="pad nav_right_color999">手机京东</li>
</ul>
<div class="clear"></div>
</div>
<div class="clear">
</div>
</div>
</div>
</body>
</html>老师，我一共有三个问题没有搞明白，一、
这个地方不用负数这个块就不能和主导航一样左对齐，主导航的内边距不给他们就可以对齐；二、我下拉框也是做了浮动的，如果做了浮动之后第二列就不能左对齐了；三、鼠标经过后主导航会左右晃动一下，这是为什么呢？麻烦请老师指导，谢谢。在中文网学清除浮动，现在用的特别6，我觉得算是进步，感谢php中文网的每位老师。谢谢你们
批改老师：天蓬老师批改时间：2018-12-21 08:58:24
老师总结：以上的问题,总结出来一句话, 以后做再做类似的项目,特别是商业项目, 一定要用绝对定位来做, 这里用浮动,只是教学需要,让大家尽快掌握浮动的使用方法, 在实际开发项目中, 这类的菜单 ,都是用绝对定位来做的, 你有空可以分析一下成熟的商业布局页面是怎么写的
