top区域下拉时，导航里的字没了，求解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/web.css">
</head>
<body>
<div class="container">
<!--top区域-->
<div class="top">
<!--top区域左侧登录-->
<div class="top-left">
<a href="#">亲，请登录</a>
<a href="#">免费注册</a>
<a href="#">手机逛慕课</a>
</div>
<!--top区域右侧导航-->
<div class="top-right">
<div class="menu">
<a href="#" class="one"><span>我的慕淘</span><img src="素材/icon/21.png"> </a>
<ul>
<li><a href="#">已买到的宝贝</a></li>
<li><a href="#">我的足迹</a></li>
</ul>
</div>
<div class="menu">
<a href="#" class="one"><span>收藏夹</span> <img src="素材/icon/21.png"> </a>
<ul>
<li><a href="#">收藏的宝贝</a></li>
<li><a href="#">收藏的店铺</a></li>
</ul>
</div>
<div class="menu">
<span><a href="#" class="one">商品的分类</a></span>
</div>
<div class="menu">
<a href="#" class="one"><span>卖家中心</span><img src="素材/icon/21.png"> </a>
<ul>
<li><a href="#">免费开店</a></li>
<li><a href="#">已卖出的宝贝</a></li>
<li><a href="#">出售中的宝贝</a></li>
<li><a href="#">卖家服务市场</a></li>
<li><a href="#">卖家培训中心</a></li>
<li><a href="#">体验中心</a></li>
</ul>
</div>
<div class="menu">
<a href="#" class="one"><span>联系客服</span><img src="素材/icon/21.png"> </a>
<ul>
<li><a href="#">消费者客服</a></li>
<li><a href="#">卖家客服</a></li>
</ul>
</div>
</div>
</div>
<!--logo区域-->
<div class="logo">
<!--左侧logo图-->
<div class="logo-left">
<a href="#"><img src="素材/logo.png" alt=""></a>
</div>
<!--中间logo区输入框-->
<div class="logo-middle">
<input type="text" placeholder="灵魂美食一元抢">
<button>搜索</button>
</div>
<!--右侧购物车-->
<div class="logo-right">
<div class="shopcar">
<img src="素材/icon/26.png" >
<span class="ml mr">购物车</span>
<span class="ml mr">|</span>
<span class="ml mr">0</span>
<img src="素材/icon/23.png">
</div>
<div class="shopcar-hide">
<div class="hide-top">
<span>最新加入的商品</span>
</div>
<div class="hide-list">
<div class="item">
<a href="#"><img src="素材/cart/1.png"><span>adidas 阿迪达斯 训练 男子</span></a>
</div>
<div class="item">
<a href="#"><img src="素材/cart/2.png"><span>玉兰油多效修护三部曲套装</span></a>
</div>
<div class="item">
<a href="#"><img src="素材/cart/3.png"><span>Apple iPhone 7(A1660)</span></a>
</div>
<div class="item">
<a href="#"><img src="素材/cart/4.png"><span>飞利浦面条机 HR2356/31</span></a>
</div>
<div class="item">
<a href="#"><img src="素材/cart/5.png"><span>罗技G29力反馈游戏方向</span></a>
</div>
</div>
<div class=hide-bottom>
<span>共27件商品 共计 ￥0.00</span><button>去购物车</button>
</div>
</div>
</div>
</div>
</div>
<!--导航-->
<div class="nav">
<ul>
<li>数码城</li>
<li>天黑黑</li>
<li>团购</li>
<li>发现</li>
<li>二手特价</li>
<li>名品汇</li>
</ul>
</div>
</body>
</html>
*{
margin:0;
padding:0;
border:none;
}
body{
font-size:14px;
}
ul{
list-style:none;
}
a{ color:black;
text-decoration:none;
}
.container{
background:#f3f5f7;
}
/*top区域*/
.top{
width:1000px;
height:50px;
margin:0 auto;
border-bottom:1px solid #b5b5b5;
}
.top-left{
float:left;
margin-left:10px;
}
.top-left a{
display:inline-block;
height:50px;
line-height:50px;
font-size:14px;
padding-left:5px;
}
.top-left a:hover{
color:red;
}
.top-left a:nth-child(1){
color:red;
}
.top-right{
float:right;
}
.top-right .menu{
float:left;
font-size:14px;
padding:0 0 0 10px;
width:90px;
position:relative;
z-index:1;
}
.top-right .menu .one{
display:block;
height:50px;
line-height:50px;
}
.top-right .menu a.one:hover{
color:red;
}
.top-right .menu .one img{
vertical-align:middle;
}
.top-right .menu ul{
display:none;
}
.top-right .menu ul li{
margin-bottom:10px;
}
/*logo区域*/
.logo{
width:1000px;
height:120px;
margin:0 auto;
position:relative;
}
/*logo区域左侧*/
.logo-left{
position:absolute;
top:30px;
left:15px;
}
/*logo区域中间输入框*/
.logo-middle{
position:absolute;
top:30px;
left:250px;
font-size:0;
}
.logo-middle input{
width:440px;
height:35px;
border:1px solid rgb(207,207,207);
padding-left:10px;
vertical-align:middle;
}
.logo-middle button{
width:65px;
height:37px;
background:black;
color:white;
box-shadow:0 0 3px 0 rgb(207,207,207);
cursor:pointer;
vertical-align:middle;
}
/*logo区域右侧购物车*/
.logo-right{
position:absolute;
top:30px;
right:10px;
}
.logo-right .shopcar{
width:180px;
height:40px;
line-height:40px;
background:red;
text-align:center;
border:1px solid rgb(207,207,207);
color:white;
cursor:pointer;
}
.logo-right .shopcar img{
vertical-align:middle;
}
.ml{
margin-left:8px;
}
.mr{
margin-right:8px;
}
/*logo区域右侧购物车隐藏列表*/
.shopcar-hide{
position:absolute;
top:40px;
left:0;
width:320px;
background:white;
border:1px solid rgb(207,207,207);
display:none;
}
.shopcar-hide .hide-top{
height:50px;
line-height:50px;
margin-left:20px;
}
.shopcar-hide .hide-list{
height:300px;
overflow-y:auto;
}
.shopcar-hide .hide-list .item{
height:60px;
padding:0 15px;
}
.shopcar-hide .hide-list .item a{
display:block;
box-sizing:border-box;
height:60px;
line-height:60px;
border-bottom:#cfcfcf 1px solid;
border-top:#cfcfcf 1px solid;
}
.shopcar-hide .hide-list .item a img{
vertical-align:middle;
}
.shopcar-hide .hide-list .item span{
margin-left:10px;
}
.shopcar-hide .hide-bottom{
height:70px;
line-height:70px;
margin-left:20px;
}
.shopcar-hide .hide-bottom button{
width:80px;
height:40px;
background:red;
color:white;
margin-left:40px;
}
/*导航区域*/
.nav{
height:50px;
background:black;
}
.nav ul{
color:white;
float:left;
margin-left:350px;
font-size:16px;
}
.nav ul li{
float:left;
line-height:50px;
margin-left:40px;
}
如题，购物车下拉时，没问题，怎么上面的下拉，导航的内容没了呢
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星