请老师检查

请老师检查

@font-face {
font-family: 'PingFangSCRegular';
src: url(../fonts/PingFangSCRegular.ttf) format(truetype);
src: url(../fonts/iconfont.eot) format(truetype);
src: url(../fonts/iconfont.json) format(truetype);
src: url(../fonts/iconfont.svg) format(truetype);
src: url(../fonts/iconfont.ttf) format(truetype);
src: url(../fonts/iconfont.woff) format(truetype);
src: url(../fonts/iconfont.woff2) format(truetype);
}
@font-face {
font-family: 'iconfont';
src: url('../fonts/ali-font/iconfont.ttf?t=1646997591627') format('truetype');
}

body {
font-family: 'PingFangSCRegular';
}
/* 版心 */
.center-wrap {
width: 1152px;
margin: 0 auto;
}
.clearfix {
overflow: hidden;
}
.clearfix::after {
content: '';
display: block;
clear: both;
overflow: hidden;
}
.tac {
text-align: center;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.iconfont {
font-family: 'iconfont' !important;
font-size: 20px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html {
color: #000;
background: #fff;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
q:before,
q:after {
content: '';
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size: 100%;
}
legend {
color: #000;
}
#yui3-css-stamp.cssreset {
display: none;
}
a {
text-decoration: none;
}
.site-head {
height: 150px;
min-width: 1152px;
}
.site-head .topbar {
min-width: 1152px;
background: #2a2a2a;
height: 32px;
line-height: 32px;
color: white;
}
.site-head .topbar a {
color: white;
}
.site-head .topbar .center-wrap .shortcut-links {
float: left;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li {
float: left;
margin-right: 18px;
font-size: 14px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu {
padding-right: 12px;
position: relative;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu em {
width: 12px;
height: 12px;
/* background-color: orange; */
position: absolute;
top: 50%;
margin-top: -6px;
right: 0;
transition: transform 0.3s linear 0s;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu:hover em {
transform: rotate(180deg);
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu em b {
position: absolute;
left: 2px;
top: 0px;
width: 8px;
height: 8px;
background-color: #fff;
transform: rotate(45deg);
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu em i {
position: absolute;
left: 2px;
top: -2px;
width: 8px;
height: 8px;
background-color: #2a2a2a;
transform: rotate(45deg);
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu {
display: none;
position: absolute;
background-color: #fff;
font-size: 12px;
padding: 8px;
line-height: 20px;
z-index: 9999;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu li {
height: 20px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu li:hover a {
color: orange;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .sqmenu {
width: 121px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .scmenu {
width: 76px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .jdmsmenu {
width: 64px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu:hover .menu {
display: block;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu ul li a {
color: black;
}
.site-head .topbar .center-wrap .topbar-r {
float: right;
width: 225px;
}
.site-head .topbar .center-wrap .topbar-r a,
.site-head .topbar .center-wrap .topbar-r span {
margin-right: 11px;
font-size: 15px;
}
.site-head .topbar .center-wrap .topbar-r a:last-child {
margin-right: 0;
}
.site-head .main-nav {
background-color: #20bd9a;
height: 40px;
}
.site-head .main-nav .center-wrap ul li {
float: left;
margin-right: 18px;
}
.site-head .main-nav .center-wrap ul li a {
color: #ffffff;
line-height: 40px;
}
.site-head .main-nav .center-wrap ul li.have-menu {
padding-right: 16px;
position: relative;
}

.site-head .main-nav .center-wrap ul li.have-menu::before {
content: '';
border: 6px solid transparent;
border-top-color: #ffffff;
position: absolute;
right: 0;
top: 18px;
width: 0;
height: 0;
border-bottom: none;
transition: transform 0.5s linear 0s;
}
.site-head .main-nav .center-wrap ul li.have-menu:hover::before {
transform: rotate(180deg);
}
.site-head .main-nav .center-wrap ul li .menu {
position: absolute;
top: 32px;
background-color: #fff;
display: none;
padding: 8px;
}
.site-head .main-nav .center-wrap ul li:hover .menu {
display: block;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
}
.site-head .main-nav .center-wrap ul li .jjzyxmenu {
width: 160px;
}
.site-head .main-nav .center-wrap ul li .gtymenu {
width: 106px;
}
.site-head .main-nav .center-wrap ul li .ddwlmenu {
width: 172px;
}
.site-head .main-nav .center-wrap ul li .sdlymenu {
width: 118px;
}
.site-head .main-nav .center-wrap ul li.have-menu .menu dt {
font-size: 14px;
color: #1c1f21;
}
.site-head .main-nav .center-wrap ul li.have-menu .menu dl dd a {
font-size: 12px;
color: #1c1f21;
line-height: 18px;
}
.site-head .main-nav .center-wrap ul li.have-menu .menu a:hover {
color: orange;
}
.site-head .header-con {
height: 78px;
}
.site-head .header-con h1 {
color: #20bd9a;
font-size: 34px;
line-height: 78px;
float: left;
margin-right: 20px;
}
.site-head .header-con input {
float: left;
width: 405px;
height: 30px;
line-height: 78px;
border: 2px solid #20bd9a;
border-radius: 4px 0 0 4px;
outline: none;
margin: 22px 0;
}
.site-head .header-con a {
float: left;
background-color: #20bd9a;
width: 32px;
height: 34px;
line-height: 78px;
border-radius: 0 4px 4px 0;
margin: 22px 0;
line-height: 34px;
text-align: center;
color: #fff;
}
.banner {
position: relative;
}
.banner .imgbox img {
width: 100%;
min-width: 1152px;
vertical-align: middle;
}
.banner .center-wrap {
/* background-color: orange; */
width: 1152px;
height: 100%;
position: absolute;
left: 50%;
margin-left: -576px;
top: 0;
}
.banner .center-wrap .btn {
width: 28px;
height: 44px;
position: absolute;
background-color: black;
}
.banner .center-wrap .leftbtn {
background-image: url(../images/icons.png);
background-position: -21px -94px;
top: 50%;
margin-top: -22px;
left: -40px;
}
.banner .center-wrap .rightbtn {
background-image: url(../images/icons.png);
background-position: -21px -29px;
top: 50%;
margin-top: -22px;
right: -40px;
}
.banner .center-wrap .btn:hover {
opacity: 0.8;
}
.banner .center-wrap .banner-nav {
height: 100%;
position: relative;
}
.banner .center-wrap .banner-nav > ul {
height: 100%;
}
.banner .center-wrap .banner-nav > ul > li {
height: 16.6666666%;
/* background-image: linear-gradient(to bottom, red, blue); */
opacity: 0.5;
background: #000000;
width: 296px;
color: white;
box-sizing: border-box;
border-bottom: 1px solid white;
position: relative;
}
.banner .center-wrap .banner-nav > ul > li::before {
content: '';
background-image: url(../images/icons.png);
position: absolute;
top: 50%;
left: 10px;
}
.banner .center-wrap .banner-nav > ul > li.hot::before {
width: 22px;
height: 18px;
background-position: -29px -399px;
margin-top: -9px;
}
.banner .center-wrap .banner-nav > ul > li.hk::before {
width: 18px;
height: 21px;
background-position: -28px -217px;
margin-top: -10.5px;
left: 13px;
}
.banner .center-wrap .banner-nav > ul > li.jp::before {
width: 24px;
height: 19px;
background-position: -25px -171px;
margin-top: -9.5px;
}
.banner .center-wrap .banner-nav > ul > li.as::before {
width: 18px;
height: 19px;
background-position: -28px -262px;
margin-top: -9.5px;
left: 12px;
}
.banner .center-wrap .banner-nav > ul > li.eu::before {
width: 20px;
height: 14px;
background-position: -29px -351px;
margin-top: -7px;
left: 11px;
}
.banner .center-wrap .banner-nav > ul > li.au::before {
width: 18px;
height: 17px;
background-position: -28px -305px;
margin-top: -8.5px;
left: 12px;
}
.banner .center-wrap .banner-nav > ul > li:last-child {
border-bottom: none;
}
.banner .center-wrap .banner-nav > ul > li dl {
position: absolute;
top: 50%;
height: 48px;
margin-top: -24px;
left: 42px;
}
.banner .center-wrap .banner-nav > ul > li dl dt {
font-size: 18px;
line-height: 26px;
}
.banner .center-wrap .banner-nav > ul > li dl dd {
font-size: 14px;
line-height: 22px;
}
.banner .center-wrap .banner-nav .menus-box .menu {
width: 356px;
position: absolute;
left: 296px;
top: 0;
opacity: 0.7;
background: #1c1f21;
height: 100%;
padding: 16px;
box-sizing: border-box;
display: none;
}
.banner .center-wrap .banner-nav .menus-box .menu dl {
margin-bottom: 12px;
}
.banner .center-wrap .banner-nav .menus-box dl dt {
font-size: 16px;
line-height: 24px;
color: white;
}
.banner .center-wrap .banner-nav .menus-box dl dd {
line-height: 22px;
}
.banner .center-wrap .banner-nav .menus-box a {
font-size: 14px;
color: white;
}
.banner .center-wrap .banner-nav .menus-box .menu.current {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>暮云游商城 -- 机票、酒店、旅游攻略</title>
<meta name="Keywords" content="机票,酒店,旅游攻略,签证,出国,自由行" />
<meta name="Description" content="暮云游商城有十多年旅游行业经验,为您提供全方位旅游服务" />
<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="shortcut-links">
<ul>
<li>
<a href="javaScript:;">目的地</a>
</li>
<li>
<a href="javaScript:;">锦囊</a>
</li>
<li class="have-menu">
<a href="javaScript:;">社区</a>
<em class="arrow">
<b></b>
<i></i>
</em>
<div class="menu sqmenu">
<ul class="menu-list">
<li>
<a href="javaScript:;">旅行论坛</a>
</li>
<li>
<a href="javaScript:;">旅行专栏</a>
</li>
<li>
<a href="javaScript:;">旅行问答</a>
</li>
<li>
<a href="javaScript:;">旅行生活分享平台</a>
</li>
<li>
<a href="javaScript:;">JNE旅行生活美学</a>
</li>
<li>
<a href="javaScript:;">Biu伴(原结伴同游)</a>
</li>
<li>
<a href="javaScript:;">负责任的旅行</a>
</li>
<li>
<a href="javaScript:;">特别策划</a>
</li>
</ul>
</div>
</li>
<li>
<a href="javaScript:;">行程助手</a>
</li>
<li class="have-menu">
<a href="javaScript:;">商城</a>
<em class="arrow">
<b></b>
<i></i>
</em>
<div class="menu scmenu">
<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="">租车自驾</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="javaScript:;">酒店·民宿</a>
<em class="arrow">
<b></b>
<i></i>
</em>
<div class="menu jdmsmenu">
<ul class="menu-list">
<li>
<a href="">酒店</a>
</li>
<li>
<a href="">爱彼迎</a>
</li>
<li>
<a href="">华人旅馆</a>
</li>
</ul>
</div>
</li>
<li>
<a href="javaScript:;">特价酒店</a>
</li>
</ul>
</nav>
<div class="topbar-r">
<a href="" class="iconfont">&#xe621;</a>
<span>|</span>
<a href="" class="iconfont">&#xe65b;</a>
<a href="" class="iconfont">&#xe8bb;</a>
<a href="" class="iconfont">&#xe61a;</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="">WIFI电话卡</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>
<input type="text" placeholder="查询目的地/酒店/机票攻略" />
<a href="" class="iconfont">&#xe621;</a>
</div>
</div>
</header>
<section class="banner">
<div class="imgbox">
<img src="images/banner1.jpg" alt="" />
</div>
<div class="center-wrap">
<a href="" class="leftbtn btn"></a>
<a href="" class="rightbtn btn"></a>
<nav class="banner-nav">
<ul>
<li class="hot">
<dl>
<dt>热门出发地</dt>
<dd>
<span>北京</span>
<span>上海</span>
<span>广深</span>
<span>西南</span>
<span>国内其他</span>
</dd>
</dl>
</li>
<li class="hk">
<dl>
<dt>港澳台 国内</dt>
<dd>
<span>香港</span>
<span>澳门</span>
<span>台湾</span>
<span>国内其他</span>
</dd>
</dl>
</li>
<li class="jp">
<dl>
<dt>日本 韩国</dt>
<dd>
<span>东京</span>
<span>大阪</span>
<span>冲绳</span>
<span>北海道</span>
<span>福冈</span>
</dd>
</dl>
</li>
<li class="as">
<dl>
<dt>东南亚 南亚</dt>
<dd>
<span>泰国</span>
<span>新加坡</span>
<span>马来西亚</span>
<span>马尔代夫</span>
</dd>
</dl>
</li>
<li class="eu">
<dl>
<dt>欧洲 美洲</dt>
<dd>
<span>英国</sp>
<span>法国</span>
<span>美国</span>
<span>加拿大</span>
</dd>
</dl>
</li>
<li class="au">
<dl>
<dt>澳新 中东非</dt>
<dd>
<span>澳大利亚</span>
<span>新西兰</span>
<span>迪拜</span>
</dd>
</dl>
</li>
</ul>
<div class="menus-box">
<div class="menu">
<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>
<a href="">澳门塔</a>
<a href="">新濠天地水舞间</a>
<a href="">澳门豪华自助</a>
<a href="">台北101</a>
<a href="">台湾美食</a>
</dd>
</dl>
<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>
<a href="">成都</a>
<a href="">重庆</a>
<a href="">长白山</a>
<a href="">厦门</a>
<a href="">长沙</a>
<a href="">桂林</a>
<a href="">北京</a>
<a href="">西安</a>
<a href="">敦煌</a>
<a href="">杭州</a>
<a href="">上海</a>
<a href="">无锡</a>
<a href="">南京</a>
<a href="">广州</a>
<a href="">黄山</a>
<a href="">莫干山</a>
<a href="">新疆</a>
<a href="">北海</a>
<a href="">九华山</a>
<a href="">太原</a>
<a href="">张家口</a>
</dd>
</dl>
<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>
<a href="">北京故宫</a>
<a href="">北京故宫</a>
<a href="">北京故宫</a>
<a href="">北京故宫</a>
<a href="">北京故宫</a>
<a href="">北京故宫</a>
</dd>
</dl>  
</div>
<div class="menu">
<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>
<a href="">澳门塔</a>
<a href="">新濠天地水舞间</a>
<a href="">澳门豪华自助</a>
<a href="">台北101</a>
<a href="">台湾美食</a>
</dd>
</dl>
</div>
<div class="menu">
<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>
<a href="">福冈</a>
<a href="">长崎</a>
<a href="">鹿儿岛</a>
<a href="">JR Pass</a>
<a href="">米其林餐厅</a>
<a href="">东京迪士尼</a>
<a href="">大阪环球影城</a>
<a href="">冲绳一日游</a>
<a href="">City Walk</a>
<a href="">西瓜卡</a>
<a href="">京都日游</a>
<a href="">和服体验</a>
<a href="">包车服务</a>
<a href="">富士山日游</a>
</dd>
</dl>
</div>
<div class="menu">
<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>
<a href="">新加坡</a>
<a href="">马来西亚</a>
<a href="">沙巴</a>
<a href="">吉隆坡</a>
<a href="">皇帝岛</a>
<a href="">泰国人妖</a>
<a href="">泰国丛林飞跃</a>
<a href="">泰国spa按摩</a>
<a href="">清迈夜间动物园</a>
<a href="">泰拳表演清莱一日游</a>
<a href="">新加坡环球影城</a>
<a href="">新加坡日游</a>
<a href="">新加坡滨海湾花园</a>
<a href="">沙巴美人鱼岛</a>
<a href="">沙巴红树林萤火虫</a>
</dd>
</dl>
<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>
<a href="">柬埔寨</a>
<a href="">缅甸</a>
<a href="">老挝</a>
<a href="">文莱</a>
<a href="">蓝梦岛</a>
<a href="">巴厘岛SPA</a>
<a href="">网红漂浮下午茶</a>
<a href="">珍珠岛游乐园</a>
<a href="">富国岛浮潜海钓</a>
<a href="">吴哥窟</a>
<a href="">西哈努克</a>
</dd>
</dl>
<dl>
<dt>南亚 西亚</dt>
<dd>
<a href="">马尔代夫</a>
<a href="">斯利卡兰</a>
<a href="">印度</a>
<a href="">尼泊尔</a>
<a href="">格鲁吉亚阿塞拜疆</a>
<a href="">亚美尼亚</a>
</dd>
</dl>
</div>
<div class="menu">
<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>
<a href="">希腊</a>
<a href="">荷兰</a>
<a href="">德国</a>
<a href="">捷克</a>
<a href="">葡萄牙</a>
<a href="">奥地利</a>
<a href="">瑞典</a>
<a href="">丹麦</a>
<a href="">挪威</a>
<a href="">冰岛</a>
<a href="">芬兰</a>
<a href="">罗瓦涅米</a>
<a href="">奥斯陆</a>
<a href="">雷克雅未克</a>
<a href="">因特拉肯</a>
<a href="">巴塞罗那</a>
<a href="">伦敦</a>
<a href="">巴黎</a>
<a href="">塞纳河</a>
<a href="">慕尼黑</a>
<a href="">普罗旺斯</a>
<a href="">温莎日游</a>
<a href="">巴黎迪斯尼</a>
<a href="">伊斯坦布</a>
<a href="">尔阿尔罕布拉宫</a>
<a href="">唐顿庄园</a>
<a href="">埃菲尔铁塔</a>
<a href="">凡尔赛宫</a>
<a href="">北欧破冰船</a>
<a href="">极光之旅</a>
<a href="">英国天空岛</a>
</dd>
</dl>
<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>
<a href="">玻利维亚</a>
<a href="">洛杉矶</a>
<a href="">纽约</a>
<a href="">拉斯维加斯</a>
<a href="">旧金山</a>
<a href="">圣地亚哥芝加哥</a>
<a href="">西雅图</a>
<a href="">华盛顿</a>
<a href="">奥兰多</a>
<a href="">夏威夷</a>
<a href="">塞班岛</a>
<a href="">关岛</a>
<a href="">环球影城</a>
<a href="">迪士尼</a>
<a href="">演出票</a>
<a href="">尼亚加拉大瀑布</a>
<a href="">帝国大厦</a>
<a href="">奥特莱斯</a>
<a href="">黄石国家公园</a>
<a href="">纽约大都会博物馆</a>
<a href="">美国大峡谷西峡</a>
<a href="">拉斯维加斯摩天轮</a>
<a href="">羚羊峡谷+马蹄湾</a>
</dd>
</dl>
</div>
<div class="menu current">
<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>
<a href="">圣灵群岛</a>
<a href="">大堡礁</a>
<a href="">墨尔本之星</a>
<a href="">悉尼热气球</a>
<a href="">水上飞机</a>
<a href="">海港大桥</a>
<a href="">皇后镇霍比特人村</a>
<a href="">怀托莫萤火虫洞</a>
<a href="">米尔福德峡湾</a>
<a href="">新西兰滑雪</a>
<a href="">瓦纳卡</a>
</dd>
</dl>
<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>
<a href="">肯尼亚</a>
<a href="">南非</a>
<a href="">伊朗</a>
<a href="">约旦</a>
<a href="">突尼斯</a>
<a href="">迪拜塔法拉利主题公园</a>
<a href="">迪拜七星帆船酒店用餐</a>
<a href="">夜游迪拜河</a>
<a href="">亚特兰蒂斯水上乐园</a>
<a href="">动物大迁徙</a>
<a href="">撒哈拉沙漠</a>
<a href="">金字塔</a>
<a href="">纳米比亚</a>
</dd>
</dl>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,本练习题要求是通过css,实现鼠标移入一级菜单,与之对应的二级菜单显示出来,而不是实现一个静态的二级菜单显示效果。

建议参考如下思路调整:

(1)由于粘贴的代码中,一级菜单项和二级菜单项的结构如下:

https://img1.sycdn.imooc.com//climg/6232f76909646ef005980413.jpg

此时的一级菜单项和二级菜单项既不是兄弟元素,也不是父子元素,css选择器无法通过鼠标移入一级菜单找到与之对应的二级菜单项让其显示出来。

所以要实现本次学习任务要求的使用css实现效果,那么就需要调整html结构,将二级菜单嵌套在与之对应的一级菜单下,然后,通过父子选择器,由一级菜单找到二级菜单让其显示出来,以第一个为例,后面的同学自己调整下,如下:

https://img1.sycdn.imooc.com//climg/6232f7de095d510308680651.jpg

调整css样式

https://img1.sycdn.imooc.com//climg/6232fa1209b0eab508570396.jpg

https://img1.sycdn.imooc.com//climg/6232fa3109b83d4210010575.jpg

https://img1.sycdn.imooc.com//climg/6232fb1809c3d52b08360950.jpg

修改后的效果:一开始默认不显示二级菜单,如下:

https://img1.sycdn.imooc.com//climg/6232fb3a0940fcf712560674.jpg

鼠标移入第一个一级菜单,与之对应的二级菜单才显示

https://img1.sycdn.imooc.com//climg/6232fb6209d3cd0209000775.jpg

祝学习愉快~

  • 芜湖呼 提问者 #1

    是不是还要调整top值

    .banner .center-wrap .banner-nav > ul > .hk > .menu {
    top: -101.6%;
    }
    .banner .center-wrap .banner-nav > ul > .jp > .menu {
    top: -203%;
    }
    .banner .center-wrap .banner-nav > ul > .as > .menu {
    top: -304%;
    }
    .banner .center-wrap .banner-nav > ul > .eu > .menu {
    top: -406%;
    }
    .banner .center-wrap .banner-nav > ul > .au > .menu {
    top: -500%;
    }


    2022-03-17 20:13:50
  • 好帮手慕久久 回复 提问者 芜湖呼 #2

    如果二级菜单使用定位设置位置,那么需要设置top属性。建议同学自己实现一下,然后新建问题,把代码粘贴出来,老师们单独为你检查回复,这样方便你复习、查看,也不影响该同学回顾自己的问题。

    2022-03-18 10:42:36
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师