2-12 老师，想请教一下关于二级菜单的设置？
来源：2-12 项目作业
呜蜩的呀
2022-08-12 15:57:41
问题描述：
关于这个二级菜单，是不是按照原始的布局，应该是在dl下面再加上各自的菜单，但是为了方便我们理解，所以使=写在了大盒子内部，但是这种情况下，那么二级菜单的点触效果应该如何实现呢？hover伪类的话，需要反应的对象是它父元素的同级元素了，不知道应该怎么书写？
相关代码：
<!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="多年旅游行业经验，提供专业服务"> <!-- 一键复位，清除掉页面有些标签的初始设置，可以应用外用的开源css来使用，记得备注版权信息 --> <link rel="stylesheet" href="css/reset.css"> <!-- 一些页面经常用到的设置可以制作成公共类，方便调用 --> <link rel="stylesheet" href="css/base.css"> <!-- 对页面的css进行准确设置 --> <link rel="stylesheet" href="css/css.css"> </head> <body> <!-- 网页头部信息制作 --> <header> <!-- top1 --> <div class="topbar"> <!-- 使居中设置，应用版心的公共类设置 --> <div class="center-wrap"> <div class="left-area"> <ul> <li> <a href="#12">目的地</a> </li> <li> <a href="#123">锦囊</a> </li> <li class="hope-menu"> <a href="#124">社区</a> <!-- 利用两个小盒子的压盖来制作线型的三角形 --> <em> <b></b> <i></i> </em> <div class="smallmenu sqarea"> <ul> <li> <a href="#02349">旅行论坛</a> </li> <li> <a href="#02348">旅行专栏</a> </li> <li> <a href="#02347">旅行问答</a> </li> <li> <a href="#02346">旅行生活分享平台</a> </li> <li> <a href="#02345">JNE旅行生活美学</a> </li> <li> <a href="#02344">Blu件(原结伴同游)</a> </li> <li> <a href="#02343">负责任的旅行</a> </li> <li> <a href="#02342">特别策划</a> </li> </ul> </div> </li> <li> <a href="#125">行程助手</a> </li> <li class="hope-menu"> <a href="#126">商城</a> <em> <b></b> <i></i> </em> <div class="smallmenu scarea"> <ul> <li> <a href="#07659">机酒自由行</a> </li> <li> <a href="#07658">当地玩乐</a> </li> <li> <a href="#07657">签证</a> </li> <li> <a href="#07656">保险</a> </li> <li> <a href="#07655">租车自驾</a> </li> <li> <a href="#07654">邮轮</a> </li> <li> <a href="#07653">河轮</a> </li> <li> <a href="#07652">私人订制</a> </li> <li> <a href="#07651">欧洲铁路</a> </li> </ul> </div> </li> <li class="hope-menu"> <a href="#127">酒店民宿</a> <em> <b></b> <i></i> </em> <div class="smallmenu jdarea"> <ul> <li> <a href="#09567">酒店</a> </li> <li> <a href="#09566">爱彼迎</a> </li> <li> <a href="#09565">华人旅馆</a> </li> </ul> </div> </li> <li> <a href="#128">特价酒店</a> </li> </ul> </div> <div class="right-area"> <a href="#0012" class="iconfont"></a> <span>|</span> <a href="#0013" class="iconfont"></a> <a href="#0014" class="iconfont"></a> <a href="#0015" class="iconfont"></a> <a href=#09"">登录</a> <a href=#094"">注册</a> </div> </div> </div> <!-- top2 --> <div class="midbar"> <div class="center-wrap"> <nav class="main-nav"> <ul> <li class="hope-menu"> <a href="">机酒自由行</a> <dl class="smallmenu jjzyx"> <dt>全部</dt> <dd> <a href="#07568">自由行</a> <a href="#07567">优惠机票</a> <a href="#07566">酒店</a> <a href="#07565">邮轮</a> <a href="#07564">定制游</a> <a href="#07563">马尔代夫</a> <a href="#07562">海岛游</a> </dd> </dl> </li> <li> <a href="">优惠机票</a> </li> <li class="hope-menu"> <a href="">跟团游</a> <dl class="smallmenu gty"> <dt>全部</dt> <dd> <a href="#09543">跟团游</a> <a href="#09542">半自助游</a> </dd> </dl> </li> <li> <a href="">酒店</a> </li> <li class="hope-menu"> <a href="">当地玩乐</a> <dl class="smallmenu ddwl"> <dt>全部</dt> <dd> <a href="#07658">日游小团</a> <a href="#07657">深度体验</a> <a href="#07656">门票票券</a> <a href="#07655">餐饮美食</a> <a href="#07654">WiFi电话卡</a> <a href="#07653">购物</a> <a href="#07652">交通票券</a> </dd> </dl> </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="hope-menu"> <a href="">深度旅游</a> <dl class="smallmenu sdly"> <dt>全部</dt> <dd> <a href="#075435">CityWalk</a> <a href="#075434">特色长线</a> <a href="#075433">Q-Home</a> </dd> </dl> </li> <li> <a href="">私人定制</a> </li> </ul> </nav> </div> </div> <!-- top3 --> <div class="bottombar"> <div class="center-wrap"> <h1>慕云游商城</h1> <div class="search-box"> <input type="text" name="searchbox"> <a href="#002" class="btn iconfont"></a> </div> </div> </div> </header> <!-- banner轮播图 --> <section class="banner"> <img src="./images/banner1.jpg" alt="banner1"> <div class="center-wrap"> <nav class="nav-list"> <a href="#0978" class="left-btn btn"></a> <a href="#0977" class="right-btn btn"></a> <ul> <li class="pdp"> <dl> <dt>热门出发地</dt> <dd> <span>北京</span> <span>上海</span> <span>广深</span> <span>西南</span> <span>国内其他</span> </dd> </dl> </li> <li class="hmt"> <dl> <dt>港澳台 国内</dt> <dd> <span>香港</span> <span>澳门</span> <span>台湾</span> <span>国内其他</span> </dd> </dl> </li> <li class="js"> <dl> <dt>日本 韩国</dt> <dd> <span>东京</span> <span>大阪</span> <span>冲绳</span> <span>北海道</span> <span>福冈</span> </dd> </dl> </li> <li class="sa"> <dl> <dt>东南亚 南亚</dt> <dd> <span>泰国</span> <span>新加坡</span> <span>马来西亚</span> <span>马尔代夫</span> </dd> </dl> </li> <li class="ea"> <dl> <dt>欧洲 美洲</dt> <dd> <span>英国</span> <span>法国</span> <span>美国</span> <span>加拿大</span> </dd> </dl> </li> <li class="anz"> <dl> <dt>澳新 中东非</dt> <dd> <span>澳大利亚</span> <span>新西兰</span> <span>迪拜</span> </dd> </dl> </li> </ul> <!-- 扩展菜单 --> <div class="hope-menu pdpmenu"> <dl> <dt>港澳台</dt> <dd> <a href="#098739">香港</a> <a href="#098738">澳门</a> <a href="#098737">台北</a> <a href="#098736">高雄</a> <a href="#098735">香港迪士尼</a> <a href="#098734">香港海洋公园</a> <a href="#098733">交通接轨</a> <a href="#098732">澳门</a> <a href="#098731">塔新漾天地水舞间</a> <a href="#098730">澳门豪华自助</a> <a href="#098729">台北101</a> <a href="#098728">台湾美食</a> </dd> </dl> <dl> <dt>国内热门城市</dt> <dd> <a href="#87659">三亚</a> <a href="#87658">东北雪乡</a> <a href="#87657">大理</a> <a href="#87656">丽江</a> <a href="#87655">昆明</a> <a href="#87654">西双版纳</a> <a href="#87653">拉萨</a> <a href="#87652">成都</a> <a href="#87651">重庆</a> <a href="#87650">长白山</a> <a href="#87649">厦门</a> <a href="#87648">长沙</a> <a href="#87647">桂林</a> <a href="#87646">北京</a> <a href="#87645">西安</a> <a href="#87644">敦煌</a> <a href="#87643">杭州</a> <a href="#87642">上海</a> <a href="#87641">无锡</a> <a href="#87640">南京</a> <a href="#87639">广州</a> <a href="#87638">黄山</a> <a href="#87637">莫干山</a> <a href="#87636">新疆</a> <a href="#87635">北海</a> <a href="#87634">九华山</a> <a href="#87633">太原</a> <a href="#87632">张家口</a> </dd> </dl> <dl> <dt>国内热门景点</dt> <dd> <a href="#098658">北京故宫</a> <a href="#098658">东北滑雪</a> <a href="#098658">恭王府</a> <a href="#098658">长城</a> <a href="#098658">青城山大熊猫基地</a> <a href="#098658">峨眉山</a> <a href="#098658">都江堰</a> <a href="#098658">长恨歌表演</a> <a href="#098658">兵马俑</a> <a href="#098658">大唐芙蓉园</a> <a href="#098658">三亚日游</a> <a href="#098658">厦门鼓浪屿</a> <a href="#098658">千岛湖</a> <a href="#098658">呼伦贝尔草原</a> <a href="#098658">希拉</a> <a href="#098658">穆仁草原</a> <a href="#098658">大理日游</a> <a href="#098658">杭州</a> <a href="#098658">重庆两江夜游船票</a> </dd> </dl> </div> <div class="hope-menu hmtmenu"> <dl> <dt>港澳台</dt> <dd> <a href="#098739">香港</a> <a href="#098738">澳门</a> <a href="#098737">台北</a> <a href="#098736">高雄</a> <a href="#098735">香港迪士尼</a> <a href="#098734">香港海洋公园</a> <a href="#098733">交通接轨</a> <a href="#098732">澳门</a> <a href="#098731">塔新漾天地水舞间</a> <a href="#098730">澳门豪华自助</a> <a href="#098729">台北101</a> <a href="#098728">台湾美食</a> </dd> </dl> </div> <div class="hope-menu jsmenu"> <dl> <dt>日本</dt> <dd> <a href="#0977788">东京</a> <a href="#0977787">大版</a> <a href="#0977786">冲绳</a> <a href="#0977785">北海道</a> <a href="#0977784">札幌</a> <a href="#0977783">京都</a> <a href="#0977782">名古屋</a> <a href="#0977781">福冈</a> <a href="#0977780">长崎</a> <a href="#0977779">鹿儿岛</a> <a href="#0977778">JR Pass</a> <a href="#0977777">米其林餐厅</a> <a href="#0977776">东京迪士尼</a> <a href="#0977775">大阪环球影城</a> <a href="#0977774">冲绳一日游</a> <a href="#0977773">City Walk</a> <a href="#0977772">西瓜卡</a> <a href="#0977771">京都</a> <a href="#0977770">日游</a> <a href="#0977769">和服体验</a> <a href="#0977768">包车服务</a> <a href="#0977767">富士山日游</a> </dd> </dl> </div> <div class="hope-menu samenu"> <dl> <dt>泰新马</dt> <dd> <a href="#0776559">普吉岛</a> <a href="#0776558">清迈</a> <a href="#0776557">曼谷</a> <a href="#0776556">苏梅岛</a> <a href="#0776555">甲米</a> <a href="#0776554">芭提雅</a> <a href="#0776553">拜县</a> <a href="#0776552">新加坡</a> <a href="#0776551">马来西亚</a> <a href="#0776550">沙巴</a> <a href="#0776549">吉隆坡</a> <a href="#0776548">皇帝岛</a> <a href="#0776547">泰国人妖</a> <a href="#0776546">泰国丛林飞跃</a> <a href="#0776545">泰国spa按摩</a> <a href="#0776544">清迈夜间动物园</a> <a href="#0776543">泰拳表演清莱一日游</a> <a href="#0776542">新加坡环球影城</a> <a href="#0776541">新加坡日游</a> <a href="#0776540">新加坡滨海湾花园</a> <a href="#0776539">沙巴美人鱼岛</a> <a href="#0776538">沙巴红树林萤火虫</a> </dd> </dl> <dl> <dt>东南亚</dt> <dd> <a href="#094589">巴厘岛</a> <a href="#094588">长滩岛</a> <a href="#094587">马尼拉</a> <a href="#094586">薄荷岛</a> <a href="#094585">美娜多芽庄</a> <a href="#094584">岘港</a> <a href="#094583">富国岛</a> <a href="#094582">柬埔寨 </a> <a href="#094581">缅甸</a> <a href="#094580">老挝</a> <a href="#094579">文莱</a> <a href="#094578">蓝梦岛</a> <a href="#094577">巴厘岛SPA</a> <a href="#094576">网红漂浮下午茶</a> <a href="#094575">珍珠岛游乐园</a> <a href="#094574">富国岛浮潜海钓</a> <a href="#094573">吴哥窟</a> <a href="#094572">西哈努克</a> </dd> </dl> <dl> <dt>南亚 西亚</dt> <dd> <a href="#094534">马尔代夫</a> <a href="#094533">斯里兰卡</a> <a href="#094532">印度</a> <a href="#094531">尼泊尔</a> <a href="#094530">格鲁吉亚阿塞拜疆</a> <a href="#094529">亚美尼亚</a> </dd> </dl> </div> <div class="hope-menu eamenu"> <dl> <dt>欧洲</dt> <dd> <a href="#877559">法国</a> <a href="#877558">意大利</a> <a href="#877557">土耳其</a> <a href="#877556">俄罗斯</a> <a href="#877555">西班牙</a> <a href="#877554">英国</a> <a href="#877553">希腊</a> <a href="#877552">荷兰</a> <a href="#877551">德国</a> <a href="#877550">捷克</a> <a href="#877549">葡萄牙</a> <a href="#877548">奥地利</a> <a href="#877547">瑞典</a> <a href="#877546">丹麦</a> <a href="#877545">挪威</a> <a href="#877544">冰岛</a> <a href="#877543">芬兰</a> <a href="#877542">罗瓦涅米</a> <a href="#877541">奥斯陆</a> <a href="#877540">雷克雅未克</a> <a href="#877539">因特拉肯</a> <a href="#877538">巴塞罗那</a> <a href="#877537">伦敦</a> <a href="#877536">巴黎</a> <a href="#877535">塞纳河</a> <a href="#877534">慕尼黑</a> <a href="#877533">普罗旺斯</a> <a href="#877532">温莎日游 </a> <a href="#877531">巴黎迪斯尼</a> <a href="#877530">伊斯坦布</a> <a href="#877529">尔阿尔罕布拉宫</a> <a href="#877528">唐顿庄园</a> <a href="#877527">埃菲尔铁塔</a> <a href="#877526">凡尔赛宫</a> <a href="#877525">北欧破冰船</a> <a href="#877524">极光之旅</a> <a href="#877523">英国天空岛</a> </dd> </dl> <dl> <dt>美洲</dt> <dd> <a href="#986407">美国</a> <a href="#986407">加拿大</a> <a href="#986407">墨西哥 </a> <a href="#986407">巴西</a> <a href="#986407">阿根廷 </a> <a href="#986407">智利 </a> <a href="#986407">秘鲁</a> <a href="#986407">玻利维亚</a> <a href="#986407">洛杉矶</a> <a href="#986407">纽约</a> <a href="#986407">拉斯维加斯</a> <a href="#986407">旧金山</a> <a href="#986407">圣地亚哥芝加哥</a> <a href="#986407">西雅图</a> <a href="#986407">华盛顿</a> <a href="#986407">奥兰多</a> <a href="#986407">夏威夷</a> <a href="#986407">塞班岛</a> <a href="#986407">关岛</a> <a href="#986407">环球影城</a> <a href="#986407">迪士尼</a> <a href="#986407">演出票</a> <a href="#986407">尼亚加拉大瀑布</a> <a href="#986407">帝国大厦</a> <a href="#986407">奥特莱斯</a> <a href="#986407">黄石国家公园</a> <a href="#986407">纽约大都会博物馆</a> <a href="#986407">美国大峡谷西峡</a> <a href="#986407">拉斯维加斯摩天轮</a> <a href="#986407">羚羊峡谷+马蹄湾</a> </dd> </dl> </div> <div class="hope-menu anzmenu"> <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> <a href="#">纳米比亚</a> </dd> </dl> </div> </nav> </div> </section> </body> </html>
相关代码：
header {
height: 150px;
background-color: antiquewhite;
min-width: 1152px;
overflow: hidden;
}
/* header top1 */
.topbar {
height: 32px;
background-color: #2A2A2A;
}
.topbar .center-wrap {
height: 32px;
}
/* header top1=left-area */
.topbar .center-wrap .left-area {
float: left;
height: 32px;
line-height: 32px;
}
/* 这里不能直接用后代选择器，此处的li里面可能还会再嵌套ul，li标签，后代选择器影响太大，用子选择器比较方便 */
.topbar .center-wrap .left-area>ul>li {
float: left;
margin-left: 18px;
height: 32px;
line-height: 32px;
}
.topbar .center-wrap .left-area>ul>li:first-child {
margin-left: 0px;
}
.topbar .center-wrap .left-area>ul>li>a {
color: white;
font-size: 12px;
}
.topbar .center-wrap .left-area .hope-menu {
padding-right: 12px;
position: relative;
}
.topbar .center-wrap .left-area .hope-menu em {
width: 12px;
height: 12px;
/* background-color: aquamarine; */
/* 设置绝对定位，并使垂直居中 */
position: absolute;
top: 50%;
margin-top: -5px;
right: -2px;
/* 给翻转添加过渡效果 */
transition: transform .2s linear 0s;
}
.topbar .center-wrap .left-area .hope-menu em b,
i {
width: 8px;
height: 8px;
transform: rotate(45deg);
/* 设置定位，微调盒子的位置，是形成压盖效果至组成线型三角形 */
position: absolute;
}
.topbar .center-wrap .left-area .hope-menu em b {
background-color: white;
top: 50%;
margin-top: -4px;
left: 50%;
margin-left: -4px;
}
.topbar .center-wrap .left-area .hope-menu em i {
background-color: #2A2A2A;
top: 0px;
left: 2px;
}
/* 设置鼠标触碰时的翻转效果 */
.topbar .center-wrap .left-area .hope-menu:hover em {
transform: rotate(180deg);
}
/* 制作小菜单 */
.topbar .center-wrap .left-area>ul>li .smallmenu {
position: absolute;
top: 32px;
left: 0px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
box-sizing: border-box;
padding-left: 8px;
padding-top: 6px;
z-index: 9999;
/* 设置隐藏 */
display: none;
}
.topbar .center-wrap .left-area>ul>li:hover .smallmenu {
display: block;
}
.topbar .center-wrap .left-area>ul>li .smallmenu li {
height: 18px;
line-height: 18px;
}
.topbar .center-wrap .left-area>ul>li .smallmenu li:hover a {
cursor: pointer;
color: red;
}
.topbar .center-wrap .left-area>ul>li .smallmenu a {
color: #1C1F21;
font-size: 12px;
line-height: 18px;
}
/* 分别设置对应区域小菜单的宽高 */
.topbar .center-wrap .left-area>ul>li .sqarea {
width: 121px;
height: 168px;
}
.topbar .center-wrap .left-area>ul>li .scarea {
width: 76px;
height: 174px;
}
.topbar .center-wrap .left-area>ul>li .jdarea {
width: 64px;
height: 66px;
}
/* header top1 right-area */
.topbar .center-wrap .right-area {
float: right;
width: 225px;
height: 32px;
line-height: 32px;
}
/* 此处要注意a和span的前缀要加上，否则意思不一样了 */
.topbar .center-wrap .right-area a,
.topbar .center-wrap .right-area span {
color: white;
margin-right: 12px;
font-size: 14px;
}
.topbar .center-wrap .right-area a:last-child {
margin-right: 0px;
}
/* header top2 */
.midbar {
height: 40px;
background-color: #20BD9A;
}
.midbar .center-wrap .main-nav {
height: 40px;
line-height: 40px;
}
.midbar .center-wrap .main-nav>ul>li {
float: left;
margin-right: 18px;
}
.midbar .center-wrap .main-nav>ul>li:last-child {
margin-right: 0px;
}
.midbar .center-wrap .main-nav>ul>li>a {
color: white;
font-size: 16px;
}
/* 使用伪元素来制作小三角 */
.midbar .center-wrap .main-nav .hope-menu {
padding-right: 16px;
position: relative;
}
.midbar .center-wrap .main-nav .hope-menu::before {
content: "";
height: 0;
width: 0;
border: 6px solid transparent;
border-top-color: white;
border-bottom: none;
position: absolute;
top: 18px;
right: 0px;
transition: transform .2s ease 0s;
}
.midbar .center-wrap .main-nav .hope-menu:hover::before {
transform: rotate(180deg);
}
/* 制作小菜单 */
.midbar .center-wrap .main-nav ul li .smallmenu {
position: absolute;
top: 35px;
left: 0px;
box-sizing: border-box;
padding-left: 8px;
padding-top: 6px;
z-index: 9999;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
display: none;
}
.midbar .center-wrap .main-nav ul li:hover .smallmenu {
display: block;
}
.midbar .center-wrap .main-nav ul li .smallmenu dt {
height: 22px;
line-height: 22px;
font-size: 14px;
color: #1C1F21;
}
.midbar .center-wrap .main-nav ul li .smallmenu dd {
line-height: 18px;
font-size: 12px;
}
.midbar .center-wrap .main-nav ul li .smallmenu dd a {
color: #1C1F21;
line-height: 18px;
}
/* 分别设置小菜单具体宽度 */
.midbar .center-wrap .main-nav ul li .jjzyx {
width: 160px;
height: 72px;
}
.midbar .center-wrap .main-nav ul li .gty {
width: 106px;
height: 54px;
}
.midbar .center-wrap .main-nav ul li .ddwl {
width: 172px;
height: 91px;
}
.midbar .center-wrap .main-nav ul li .sdly {
width: 118px;
height: 72px;
}
/* header top3 */
.bottombar {
height: 36px;
padding: 21px 0px;
background-color: white;
}
.bottombar .center-wrap {
position: relative;
}
.bottombar .center-wrap h1 {
float: left;
width: 120px;
height: 36px;
line-height: 36px;
color: #20BD9A;
font-size: 24px;
font-weight: bold;
}
.bottombar .center-wrap .search-box {
float: left;
width: 405px;
height: 30px;
margin-left: 20px;
padding-top: 4px;
}
.bottombar .center-wrap .search-box input {
float: left;
width: 373px;
height: 30px;
border: 1px solid #20BD9A;
box-sizing: border-box;
border-radius: 4px 0px 0px 4px;
/* 取消默认的外线，外线是文本框默认的属性 */
outline: none;
}
.bottombar .center-wrap .search-box .btn {
float: left;
width: 32px;
height: 30px;
background-color: #20BD9A;
border-radius: 0px 4px 4px 0px;
text-align: center;
line-height: 30px;
font-size: 20px;
}
/* banner区域 */
.banner {
height: 420px;
overflow: hidden;
position: relative;
min-width: 1152px;
}
.banner img {
width: 100%;
min-width: 1152px;
height: 420px;
/* 垂直居中，该属性使图片和盒子之间不会再产生缝隙 */
vertical-align: middle;
}
.banner .center-wrap {
height: 420px;
/* background-color: antiquewhite; */
position: absolute;
top: 0px;
left: 50%;
margin-left: -576px;
}
.banner .center-wrap .nav-list {
width: 1152px;
height: 420px;
position: relative;
}
.banner .center-wrap .nav-list>ul {
width: 296px;
height: 420px;
/* background-color: #1C1F21;
opacity: .5; */
background-color: rgba(28, 31, 33, .5);
}
.banner .center-wrap .nav-list>ul>li {
width: 296px;
height: 16.66%;
/* background-color: aquamarine; */
/* opacity: .5; */
box-sizing: border-box;
position: relative;
border: 1px solid rgba(255, 255, 255, .2);
}
.banner .center-wrap .nav-list .btn {
display: block;
width: 28px;
height: 44px;
border-radius: 3px;
position: absolute;
top: 50%;
margin-top: -22px;
opacity: .6;
}
.banner .center-wrap .nav-list .left-btn {
background: url(../images/icons.png) no-repeat -21px -94px;
left: -38px;
}
.banner .center-wrap .nav-list .right-btn {
background: url(../images/icons.png) no-repeat -21px -29px;
right: -38px;
}
.banner .center-wrap .nav-list .btn:hover {
opacity: 0.8;
cursor: pointer;
}
/* banner区域垂直菜单 */
.banner .center-wrap .nav-list>ul {
display: inline-block;
}
.banner .center-wrap .nav-list>ul>li>dl {
width: 254px;
height: 48px;
position: absolute;
top: 50%;
margin-top: -24px;
left: 42px;
color: #fff;
}
.banner .center-wrap .nav-list>ul>li>dl>dt {
font-size: 18px;
line-height: 26px;
}
.banner .center-wrap .nav-list>ul>li>dl>dd {
font-size: 14px;
line-height: 22px;
}
.banner .center-wrap .nav-list>ul>li>dl>dd span {
margin-right: 6px;
}
.banner .center-wrap .nav-list>ul>li>dl>dd span:last-child {
margin-right: 0px;
}
.banner .center-wrap .nav-list>ul>li::before {
content: "";
width: 24px;
height: 24px;
position: absolute;
top: 50%;
margin-top: -10px;
left: 12px;
background-image: url(../images/icons.png);
}
.banner .center-wrap .nav-list>ul>li.pdp::before {
background-position: -29px -399px;
}
.banner .center-wrap .nav-list>ul>li.hmt::before {
background-position: -28px -217px;
}
.banner .center-wrap .nav-list>ul>li.js::before {
background-position: -25px -171px;
}
.banner .center-wrap .nav-list>ul>li.sa::before {
background-position: -28px -262px;
}
.banner .center-wrap .nav-list>ul>li.ea::before {
background-position: -29px -351px;
}
.banner .center-wrap .nav-list>ul>li.anz::before {
background-position: -28px -305px;
}
/* 扩展菜单书写，为了方便后期查找写在大盒子里面 */
.banner .center-wrap .hope-menu {
width: 356px;
height: 420px;
position: absolute;
top: 0px;
left: 296px;
background-color: rgba(28, 31, 33, .7);
padding: 16px 0 0 16px;
box-sizing: border-box;
overflow: hidden;
display: none;
}
.banner .center-wrap .hope-menu dl {
width: 340px;
box-sizing: border-box;
margin-bottom: 14px;
}
.banner .center-wrap .hope-menu dl dt {
height: 24px;
line-height: 24px;
font-size: 16px;
color: white;
margin-bottom: 4px;
}
.banner .center-wrap .hope-menu dl dd a {
display: inline-block;
height: 22px;
line-height: 22px;
font-size: 14px;
color: white;
}
.banner .center-wrap .hope-menu dl dd a:hover {
color: brown;
cursor: pointer;
}
.banner .center-wrap .nav-list>ul>li::after {
content: ">";
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
position: absolute;
top: 50%;
margin-top: -12px;
right: 4px;
font-size: 24px;
color: white;
}相关代码：
/* 定义字体,全局使用的文字建议放在base里面 */
@font-face {
font-family: "PingFangSCRegular";
src: url(../fonts/PingFangSCRegular.ttf) format('truetype');
}
/* 全局使用该字体 */
body {
/* 此处用的字体是自定义的字体 */
font-family: "PingFangSCRegular";
}
/* 特殊的图标字体，采用字体定义的方式引入 */
@font-face {
font-family: 'iconfont';
src: url('../fonts/iconfont.ttf?t=1660121995312') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.clearfix {
overflow: hidden;
}
.clearfix::after {
content: "";
display: block;
clear: both;
overflow: hidden;
}
/* 原子类的分类记得不要分的太细，可以分一些常用的公共类 */
/* 文字居中 */
.tac {
text-align: center;
}
/* 盒子水平居中,这次的页面布局版心是固定的 */
.center-wrap {
width: 1152px;
margin: 0 auto;
}相关代码：
/*
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;
}写回答
1回答
-
好帮手慕星星
2022-08-12
同学你好，目前这种布局只能在等后面学习了js后完成，css选择器不能实现，无法找到关系。
当前作业需要改变布局完成，将二级菜单放在li中，与dl为兄弟关系，参考：
设置二级菜单相对于li定位，移入li的时候，让二级菜单显示。每个二级菜单需要分别定位位置，如下：
祝学习愉快！
0
相似问题