怎么会这样
来源：2-2 查看PSD设计图
慕仰3091474
2019-05-12 17:48:49
/*nav-site*/
.nav-site{
width: 100%;
background-color: #f3f5f7;
}
.nac-site .container{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{
color: f01414;
margin-right: 15px;
}
.nav-site-mobile{
margin-left: 10px;
}
/*dropdown*/
.dropdown{
position: relative;
}
.dropdown-toggle{
height: 100%;
padding: 0 16px 0 12px;
border-left:1px solid #f3f5f7;
border-right:1px solid #f3f5f7;
}
.dropdown-arrow{
display: inline-block;
width: 8px;
height: 6px;
background:url(../img/dropdown-arrow-active.png) no-repeat;
margin-left: 8px;
}
.dropdown-layer{
position: absolute;
top: 44px;
border: 1px solid #;
}
.dropdown-item{
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4D555D;
white-space: nowrap;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕淘网</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/common.css" />
</head>
<body>
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="java" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="java" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" class="nav-site-mobile link" target="_blank">手机逛幕套</a></li>
</ul>
<ul class="fr">
<li class="dropdown fl">
<a href="###" class="dropdown-toggle link">我的幕套<li class="dropdown-arrow"></li></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="dropdown-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="dropdown-item">我的足迹</a></li>
</ul>
</li>
<li class="dropdown fl">
<a href="###" class="dropdown-toggle link">收藏夹<li class="dropdown-arrow"></li></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="dropdown-item">收藏到的宝贝</a></li>
<li><a href="###" target="_blank" class="dropdown-item">收藏到的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="dropdown fl">
<a href="###" class="dropdown-toggle link">我的幕套<li class="dropdown-arrow"></li></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="dropdown-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="dropdown-item">我的足迹</a></li>
</ul>
</li>
<li class="nav-site-service dropdown fl">
<a href="###" class="dropdown-toggle link">联系客服<li class="dropdown-arrow"></li></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="dropdown-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="dropdown-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
</body>
</html>
1回答
-
好帮手慕慕子
2019-05-12
同学你好，请问同学是指下图为什么会这样吗？
那么是因为同学的HTML结构中的标签嵌套不规范导致的。你这里在li下的a标签下又嵌套了一个li。导致浏览器解析不对造成的， HTML结构如下图：
建议修改： 可以将a标签下嵌套的li标签改成span标签， 示例：
修改后的效果图：
另外，同学代码中有两处书写需要修改一下， 示例：
1、 颜色没有写“#”
2、这里的border样式没有写全
若同学不是指的这里的话，可以详细的描述下，指的是哪里，再次提问，老师会继续为你解答哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题