老师帮我看一下，menu菜单栏下方橙色盒子显示不出来
来源：2-7 使用CSS制作菜单
不朽3453558
2020-11-22 19:59:08
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
CSS部分
.site-head{
height: 150px;
}
.site-head .topbar{
height: 32px;
background: #383D42;
font-family: PingFangSC-Regular;
font-size: 14px;
line-height: 32px;
overflow: hidden;
}
.site-head .topbar a{
color: #FFFFFF;
}
.site-head .topbar .center-wrap{
}
.site-head .topbar .center-wrap .shourtcut-links{
float: left;
}
.site-head .topbar .center-wrap .shourtcut-links ul{
}
.site-head .topbar .center-wrap .shourtcut-links>ul>li{
float: left;
margin-right: 18px;
}
.site-head .topbar .center-wrap .shourtcut-links>ul>li.have-menu{
padding-right: 12px;
position: relative;
}
.site-head .topbar .center-wrap .shourtcut-links>ul>li.have-menu .arrow{
position: absolute;
right: -2px;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
transition: transform .2s ease 0s;
}
.site-head .topbar .center-wrap .shourtcut-links>ul>li.have-menu:hover .arrow{
transform: rotate(180deg);
}
.site-head .topbar .center-wrap .shourtcut-links>ul>li.have-menu .arrow b{
position: absolute;
top: 2px;
left: 3px;
width: 6px;
height: 6px;
background-color: #FFFFFF;
transform: rotate(45deg);
}
.site-head .topbar .center-wrap .shourtcut-links>ul>li.have-menu .arrow i{
position: absolute;
top: 0.5px;
left: 3px;
width: 6px;
height: 6px;
background-color: #383D42;
transform: rotate(45deg);
}
/* 盒子未显示出来 */
.site-head .topbar .shourtcut-links>ul>li.have-menu .menu{
position: absolute;
top: 30px;
left: 0px;
background-color: orange;
z-index: 9999;
}
.site-head .topbar .center-wrap .shourtcut-links>ul>li.have-menu .menu ul li{
z-index: 9999;
}
.site-head .topbar .center-wrap .nav-r{
float: right;
width: 225px;
}
.site-head .topbar .center-wrap .nav-r a,.site-head .topbar .center-wrap .nav-r{
/* width: 20px;
height: 20px; */
margin-right:11px;
font-size: 14px;
color: #FFFFFF;
font-family: PingFangSC-Regular;
}
.site-head .topbar .center-wrap .nav-r a:last-child{
margin-right: 0px;
}
.site-head .main-nav{
height: 40px;
background-color: #20BD9A;
}
.site-head .main-nav .center-wrap ul{
}
.site-head .main-nav .center-wrap ul li{
float: left;
margin-right: 18px;
}
.site-head .main-nav .center-wrap ul li.have-menu{
padding-right: 16px;
position: relative;
}
.site-head .main-nav ul li a{
color: #FFFFFF;
line-height: 40px;
font-size: 16px;
font-family: PingFangSC-Regular;
}
.main-nav ul li.have-menu::before{
content: "";
position: absolute;
top: 18px;
right: 0;
width: 0px;
height: 0px;
border: 5px solid transparent;
border-bottom: none;
border-top-color:#FFFFFF;
transition: transform .2s ease 0s;
}
.site-head .main-nav ul li.have-menu:hover::before{
transform: rotate(180deg);
}
.site-head .header-com{
height: 78px;
}
.site-head .header-com .center-wrap h1{
width: 120px;
height: 36px;
font-family: PingFangSC-Medium;
font-size: 24px;
font-weight: bold;
color: #20BD9A;
line-height: 36px;
margin:21px;
float: left;
}
.site-head .header-com .center-wrap .soso-box{
float: left;
margin-top:24px;
position: relative;
}
.site-head .header-com .center-wrap .soso-box input{
width: 371px;
height: 28px;
border: 1px solid #20BD9A;
border-radius: 4px 0 0 4px;
outline: none;
/* float: left; */
}
.site-head .header-com .center-wrap .soso-box .btn{
position: absolute;
right: 0px;
bottom: 0px;
/* float: left; */
width: 32px;
height: 30px;
background: #20BD9A;
text-align: center;
line-height: 30px;
font-size: 20px;
color: #FFFFFF;
}
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕云游商城 - 机票、酒店、旅游攻略</title>
<meta name="keywords" content="机票,酒店,旅游攻略,签证,出国,自由行">
<meta name="description" content="慕云游商城有10多年旅游行业经验,为您提供全方位的旅游服务!">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header class="site-head">
<div class="topbar">
<div class="center-wrap">
<nav class="shourtcut-links">
<ul>
<li>
<a href="#">目的地</a>
</li>
<li>
<a href="#">锦囊</a>
</li>
<li class="have-menu">
<a href="#">社区</a>
<em class="arrow">
<b></b>
<i></i>
</em>
<!-- 这里的盒子未显示 -->
<div class="menu">
<ul>
<li><a href="">旅行论坛</a></li>
<li><a href="">旅行专栏</a></li>
<li><a href="">旅行问答</a></li>
<li><a href="">旅行生活分享平台</a></li>
<li><a href="">JNE旅行生活美学</a></li>
<li><a href="">Biu伴（原结伴同游)</a></li>
<li><a href="">负责任的旅行</a></li>
<li><a href="">特别策划</a></li>
</ul>
</div>
</li>
<li>
<a href="#">行程助手</a>
</li>
<li class="have-menu">
<a href="#">商城</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
<li class="have-menu">
<a href="#">酒店·民宿</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
<li>
<a href="#">特价酒店</a>
</li>
</ul>
</nav>
<div class="nav-r">
<a href="#"><span class="iconfont"></span></a>
<a href="#"><span>丨</span></a>
<a href="#"><span class="iconfont"></span></a>
<a href="#"><span class="iconfont"></span></a>
<a href="#"><span class="iconfont"></span></a>
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</div>
<nav class="main-nav">
<div class="center-wrap">
<ul>
<li class="have-menu">
<a href="">机酒自由行</a>
</li>
<li>
<a href="">优惠机票</a>
</li>
<li class="have-menu">
<a href="">跟团游</a>
</li>
<li>
<a href="">酒店</a>
</li>
<li class="have-menu">
<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>
<li class="have-menu">
<a href="">深度旅游</a>
</li>
<li>
<a href="">私人订制</a>
</li>
</ul>
</div>
</nav>
<div class="header-com">
<div class="center-wrap">
<h1>慕云游商城</h1>
<div class="soso-box">
<input type="text" placeholder="目的地/旅游景点/酒店/门票">
<a href="#" class="btn iconfont"></a>
</div>
</div>
</div>
</header>
</body>
</html>
1回答
-
同学你好，橙色盒子不显示出来是因为它的父容器.toobar设置overflow：hidden；把超出的部分隐藏了，把它去掉即可，参考下图：
效果：
祝学习愉快！
0
相似问题