老师机酒自由行菜单没有出来.二是颜色没有弄出来
来源：2-9 大Banner的布局（2）
球球不一般
2022-03-03 13:59:11
<header class="site-head">
<div class="topbar">
<div class="center-wrap">
<nav class="shortcur-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 sqmenu">
<ul class="menu-list">
<li><a href="">旅行论坛</a></li>
<li><a href="">旅行专栏</a></li>
<li><a href="">旅行问答</a></li>
<li><a href="">旅行生活分享平台</a></li>
<li><a href="">jme旅行生活美学</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>
<div class="menu scmenu">
<ul class="menu jjzyxmenu">
<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>
<li><a href="">河轮</a></li>
<li><a href="">私人定制</a></li>
<li><a href="">欧洲铁路</a></li>
</ul>
</div>
</li>
<li class="have-menu">
<a href="">酒店.民宿</a>
<em class="arrow">
<b></b>
<i></i>
</em>
<div class="menu jdmsmenu">
<ul class="menu gtymenu">
<li><a href="">酒店</a></li>
<li><a href="">爱彼迎</a></li>
<li><a href="">华人旅馆</a></li>
>
</ul>
</div>
</li>
<li>
<a href="">特价酒店</a>
</li>
</ul>
</nav>
<div class="topbar-r">
<a href="">
<span class="iconfont"></span>
</a>
<span>|</span><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>
<div class="menu jjzyxmenu">
<dl>
<dt>全部</dt>
<dd>
<a href="">自由行</a>
<a href="">优惠机票</a>
<a href="">酒店</a>
<a href="">游轮</a>
<a href="">定制游</a>
<a href="">马尔代付</a>
<a href="">海岛游</a>
</dd>
</dl>
</div>
</li>
<li>
<a href="">优惠机票</a>
</li>
<li class="have-menu">
<a href="">跟团游</a>
<div class="menu gtymenu">
<dl>
<dt>全部</dt>
<dd>
<a href="">跟团游</a>
<a href="">半自助游</a>
</dd>
</dl>
</div>
</li>
<li>
<a href="">酒店</a>
</li>
<li class="have-menu">
<a href="">当地玩乐</a>
<div class="menu ddwlmenu">
<dl>
<dt>全部</dt>
<dd>
<a href="">日游小团</a>
<a href="">深度体验</a>
<a href="">门票票卷</a>
<a href="">餐饮美食</a>
<a href="">wfi电话卡</a>
<a href="">购物</a>
<a href="">交通卡</a>
</dd>
</dl>
</div>
</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>
<div class="menu sdlymenu">
<dl>
<dt>全部</dt>
<dd>
<a href="">citywalk</a>
<a href="">特色长线</a>
<a href="">q-home</a>
</dd>
</dl>
</div>
</li>
<li>
<a href="">私人定制</a>
</li>
</ul>
</div>
</nav>
<div class="header-con">
<div class="center-wrap">
<h1>暮云游商城</h1>
<div class="soso-box">
<Input type="text" placeholder="请输入目的地"></Input>
<a href="" class="btn iconfont"></a>
</div>
</div>
</div>
</header>
<section class="banner">
<img src="images/banner1.jpg" alt="">
<div class="center-warp">
<nav class="banner-nav">
<ul>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
<li>
</li>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
<dl>
<dt></dt>
<dd></dd>
</dl>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
</ul>
</nav>
</div>
</section>
.site-head{
height: 150px;
min-width: 1152px;
}
.site-head .topbar{
min-width: 1152px;
height: 32px;
background-color: #2a2a2a;
color: white;
line-height: 32px;
}
.site-head .topbar a{
color: white;
}
.site-head .topbar .shortcur-links{
float: left;
}
.site-head .topbar .shortcur-links ul{
}
.site-head .topbar .topbar-r{
float: right;
width: 225px;
}
.site-head .topbar .topbar-r a,.site-head .topbar .topbar-r a{
margin-right: 13px;
font-size: 14px;
}
.site-head .topbar .topbar-r a:last-child{
margin-right: 0;
}
.site-head .topbar .shortcur-links>ul>li{
float: left;
margin-right: 18px;
font-size: 14px;
}
.site-head .topbar .shortcur-links>ul>li.have-menu{
padding-right: 12px;
position: relative;
}
.site-head .topbar .shortcur-links>ul>li.have-menu .arrow{
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
}
.site-head .topbar .shortcur-links>ul>li.have-menu .arrow b{
position: absolute;
width: 6px;
top: 3px;
left: 3px;
height: 6px;
background-color: #fff;
transform: rotate(45deg);
}
.site-head .topbar .shortcur-links>ul>li.have-menu .arrow i{
position: absolute;
width: 6px;
top: 1px;
left: 3px;
height: 6px;
background-color: #2a2a2a;
transform: rotate(45deg);
}
.site-head .topbar .shortcur-links>ul>li.have-menu:hover .arrow{
transform: rotate(180deg);
}
.site-head .main-nav{
min-width: 1152px;
height: 40px;
background-color: #20bd9a;
}
.site-head .main-nav ul li{
float: left;
margin-right: 18px;
}
.site-head .main-nav ul li.have-menu{
padding-right: 16px;
position: relative;
}
.site-head .main-nav ul li a{
line-height: 40px;
color: white;
font-size: 16px;
}
.site-head .main-nav ul li.have-menu::before{
content: '';
position: absolute;
width: 0px;
right: 0;
top: 17.5px ;
;
height: 0px;
border: 5px solid transparent;
border-bottom: none;
border-top-color:rgb(244, 244, 250) ;
transition: transform .5s ease 0s;
}
.site-head .main-nav ul li.have-menu:hover::before{
transform: rotate(18deg);
}
.site-head .header-con{
height: 36px;
padding: 21px 0;
}
.site-head .header-con h1{
float: left;
font-size: 24px;
color: #20bd9a;
font-weight: bold;
line-height: 36px;
}
.site-head .header-con .soso-box{
float: left;
margin-left: 20px;
width: 405px;
padding-top: 2px;
}
.site-head .header-con .soso-box input{
width: 361px;
height: 28px;
border-radius: 4px 0 0 4px ;
border: 1px solid #20bd9a;
font-size: 14px;
outline: none;
padding-left: 10px;
float: left;
}
.site-head .header-con .soso-box .btn{
/* display: inline-block; */
width: 32px;
height: 30px;
background-color: #20bd9a;
float: left;
color: white;
text-align: center;
line-height: 30px;
font-size: 18px;
border-radius: 0 4px 4px 0;
}
.site-head .topbar .shortcur-links >ul>li.have-menu .menu{
position: absolute;
top: 30px;
left: 0px;
z-index: 9999;
display: none;
padding-top: 10px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(126, 126, 126, 0.2);
padding: 10px;
display: none;
}
.site-head .topbar .shortcur-links >ul>li.have-menu .sqmenu{
width: 110px;
}
.site-head .topbar .shortcur-links >ul>li.have-menu:hover .menu{
display: block
}
.site-head .topbar .shortcur-links >ul>li.have-menu .menu .menu-list a{
font-size: 14px;
color: #1c1f21;
line-height: 20px;
}
.site-head .topbar .shortcur-links >ul>li.have-menu .menu .menu-list li{
height: 20px;
line-height: 20px;
}
.site-head .topbar .shortcur-links >ul>li.have-menu .menu .menu-lis a:hover{
color: orange;
}
.site-head .topbar .shortcur-links >ul>li.have-menu .scmenu{
width: 80px;
}
.site-head .topbar .shortcur-links >ul>li.have-menu .jdmsmenu{
width: 110px;
}
.site-head .main-nav .menu{
position: absolute;
top: 35px;
left: 0;
background-color: white;
padding: 10px;
display: none;
}
.site-head .main-nav ul li .menu dl dd a {
color: #1c1f21;
font-size: 12px;
line-height: 20px
}
.site-head .main-nav ul li .gtymenu{
width: 99px;
}
.site-head .main-nav ul li .jjzyxmenu{
width: 150px;
}
.site-head .main-nav ul li .ddwlmenu{
width: 190px;
}
.site-head .main-nav ul li .sdlymenu{
width: 160px;
}
.site-head .main-nav ul li:hover.menu{
display: block;
}
.banner img{
width: 100%;
min-width: 1152px;
vertical-align: middle;
}
.banner .banner-nav{
position: absolute;
width: 1152px;
left: 50%;
top: 0;
height: 100px;
/* background-color: orange; */
}
.banner{
position: relative;
}
.banner .banner-nav ul li{
height: 100%;
}
.banner .banner-nav ul li{
height: 16.66%;
width: 296px;
background-color: linear-gradient(to bottom red blue);
}
搜索
复制
1回答
-
好帮手慕小李
2022-03-03
同学你好，解答如下：
1、机酒自由行的菜单，同学没有写css效果，所以移入的时候没有效果。如下
优化方案如下：
最后效果如下：
这里要注意下拉框已经被banner遮挡了，原因是banner设置了定位，所以提升了层级，故遮挡住了下拉框。
2、top里的下拉菜单中内容没有显示，如下：
原因是同学将a标签中的字体颜色写成白色了，这样就与背景色相同了，所以就出现了上面的情况。
3、一级菜单没有显示出来，原因如下：
类名拼写错了，导致的问题。另这里使用100%高度是不会生效的，建议如下：
同学自己试试，祝学习愉快！
0
相似问题