为什么这里的hover属性一点击只有对应的才会显示，这里设置的不是只要一点击have-menu这个类名的就会全部显示出来吗?
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代
<!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="慕云游商城有十多年旅游服务行业经验，为您提供全方位旅游服务">
<!-- reset.css用来样式复位 -->
<link rel="stylesheet" href="css/reset.css">
<!-- base.css用来放公共类 -->
<link rel="stylesheet" href="css/base.css">
<!-- css.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="">目的地</a>
</li>
<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="">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>
<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="">酒店·民宿</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="">特价酒店</a>
</li>
</ul>
</nav>
<div class="topbar-r">
<a href="" class="iconfont"></a>
<span>|</span>
<a href="" class="iconfont"></a>
<a href="" class="iconfont"></a>
<a href="" class="iconfont"></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>
<div class="soso-box">
<input type="text" placeholder="查询目的地\酒店\机票\攻略">
<a href="" class="btn iconfont"></a>
</div>
</div>
</div>
</header>
</body>
</html>
.site-head {
height: 150px;
}
.site-head .topbar {
height: 32px;
background-color: #2a2a2a;
line-height: 32px;
}
.site-head .topbar a {
color: white;
}
.site-head .topbar .shortcut-links {
float: left;
}
.site-head .topbar .shortcut-links ul {}
.site-head .topbar .shortcut-links>ul>li {
float: left;
margin-right: 18px;
font-size: 14px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu {
padding-right: 12px;
position: relative;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .menu {
position: absolute;
top: 30px;
left: 0;
/* width: 300px;
height: 400px; */
background-color: white;
z-index: 9999;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
/* 隐藏 */
display: none;
padding: 10px;
}
/* 鼠标碰到have-menu的时候，让这个盒子出现 */
.site-head .topbar .shortcut-links>ul>li.have-menu:hover .menu {
display: block;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .sqmenu {
width: 101px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .scmenu {
width: 66px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .jdmsmenu {
width: 64px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .menu .menu-list li {
height: 20px;
line-height: 20px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .menu .menu-list li a {
font-size: 12px;
color: #1C1F21;
line-height: 20px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .menu .menu-list li a:hover {
color: orange;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .arrow {
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
transition: transform 0.2s linear 0s;
/* background-color: yellow; */
}
.site-head .topbar .shortcut-links>ul>li.have-menu:hover .arrow {
transform: rotate(180deg);
}
.site-head .topbar .shortcut-links>ul>li.have-menu .arrow b {
position: absolute;
top: 3px;
left: 3px;
width: 6px;
height: 6px;
background-color: white;
transform: rotate(45deg);
}
.site-head .topbar .shortcut-links>ul>li.have-menu .arrow i {
position: absolute;
top: 2px;
left: 3px;
width: 6px;
height: 6px;
background-color: #2a2a2a;
transform: rotate(45deg);
}
.site-head .topbar .topbar-r {
float: right;
width: 225px;
}
.site-head .topbar .topbar-r a,
.site-head .topbar .topbar-r span {
margin-right: 10px;
font-size: 14px;
color: white;
}
.site-head .topbar .topbar-r a:last-child {
margin-right: 0;
}
.site-head .main-nav {
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;
right: 0;
top: 18px;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom: none;
border-top-color: white;
transition: transform 1s linear 0s;
}
.site-head .main-nav ul li.have-menu:hover::before {
transform: rotate(180deg);
}
.site-head .header-con {
height: 36px;
padding: 21px 0;
}
.site-head .header-con h1 {
font-size: 24px;
float: left;
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 {
float: left;
width: 361px;
border: 1px solid #20BD9A;
/* 分别按四个角进行设置 */
border-radius: 4px 0 0 4px;
font-size: 12px;
height: 28px;
padding-left: 10px;
/* 取消默认文本框外线（外线是文本框特有的东西） */
outline: none;
}
.site-head .header-con .soso-box .btn {
float: left;
width: 32px;
height: 30px;
color: white;
text-align: center;
line-height: 30px;
font-size: 18px;
background-color: #20BD9A;
border-radius: 0 4px 4px 0;
}
.site-head .main-nav ul li .menu {
position: absolute;
top: 35px;
left: 0;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
padding: 10px;
/* 隐藏 */
display: none;
}
.site-head .main-nav ul li.have-menu:hover .menu {
display: block;
}
.site-head .main-nav ul li .menu dl dd dt {
font-size: 16px;
}
.site-head .main-nav ul li .menu dl dd a {
font-size: 12px;
line-height: 20px;
color: #1C1F21;
}
.site-head .main-nav ul li .menu dl dd a:hover {
color: orange;
}
.site-head .main-nav ul li .jjzyxmenu {
width: 150px;
}
.site-head .main-nav ul li .gtymenu {
width: 90px;
}
.site-head .main-nav ul li .ddwlmenu {
width: 190px;
}
.site-head .main-nav ul li .sdlymenu {
width: 160px;
}
码，可通过选择【代码语言】突出显示
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星