2-12 项目作业
来源：2-12 项目作业
慕移动4506339
2022-10-25 22:22:28
老师，二级菜单为什么在这里显示不出来？在前面的视频课程中老师直接加上类名current 使二级菜单显示出来的，为什么这里不行？
index.html
<!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> <link rel="stylesheet" href="css/css.css"> </head> <body> <section class="banner"> <!-- 轮播图 --> <img src="images/banner2.jpg" class="img"> <div class="center-wrap"> <!-- 左右轮播按钮 --> <a class="left-btn" href=""></a> <a class="right-btn" href=""></a> <!-- 一级菜单 --> <ul class="first-menu"> <li class="hot"> <dl> <dt>出门出发地</dt> <dd> <em>北京</em> <em>上海</em> <em>广深</em> <em>西南</em> <em>国内其他</em> </dd> </dl> </li> <li class="hk"> <dl> <dt>港澳台 国内</dt> <dd> <em>香港</em> <em>澳门</em> <em>国内其他</em> </dd> </dl> </li> <li class="jp"> <dl> <dt>日本 韩国</dt> <dd> <em>东京</em> <em>大阪</em> <em>冲绳</em> <em>北海道</em> <em>福冈</em> </dd> </dl> </li> <li class="as"> <dl> <dt>东南亚 </dt> <dd> <em>泰国</em> <em>新加坡</em> <em>印尼</em> <em>马来西亚</em> <em>越南</em> </dd> </dl> </li> <li class="eu"> <dl> <dt>欧洲 美洲</dt> <dd> <em>英国</em> <em>法国</em> <em>美国</em> <em>加拿大</em> </dd> </dl> </li> <li class="ao"> <dl> <dt>奥新 中东非</dt> <dd> <em>澳大利亚</em> <em>新西兰</em> <em>迪拜</em> </dd> </dl> </li> </ul> <!-- 二级菜单 --> <ul class="second-menu"> <li class="cur"> <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="">台北101</a> <a href="">台湾美食</a> </dd> </dl> </li> <li> <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> </li> <li> <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> </li> </ul> </div> </section> </body> </html>
css.css
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
em {
font-style: normal;
}
section.banner {
width: 100%;
position: relative;
}
.banner img {
width: 100%;
min-width: 1152px;
vertical-align: middle;
}
section.banner .center-wrap {
width: 1152px;
height: 100%;
position: absolute;
top: 0;
left: 50%;
margin-left: -576px;
}
section.banner .center-wrap .left-btn {
position: absolute;
width: 52px;
height: 88px;
left: -62px;
top: 50%;
margin-top: -44px;
background-image: url(../images/spider.png);
background-position: -77px -145px;
}
section.banner .center-wrap .right-btn {
position: absolute;
width: 52px;
height: 88px;
right: -62px;
top: 50%;
margin-top: -44px;
background-image: url(../images/spider.png);
background-position: -198px -145px;
}
section.banner .center-wrap ul.first-menu {
color: white;
font-size: 18px;
color: #FFFFFF;
float: left;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
section.banner .center-wrap ul.first-menu>li {
height: 16.6%;
width: 296px;
border: 1px solid gray;
padding-left: 40px;
box-sizing: border-box;
position: relative;
}
section.banner .center-wrap ul.first-menu>li::before {
position: absolute;
content: '';
background-image: url(../images/spider.png);
left: 0px;
top: 50%
}
section.banner .center-wrap ul.first-menu>li.hot::before {
width: 42px;
height: 37px;
background-position: -699px -170px;
margin-top: -18.5px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.hk::before {
width: 36px;
height: 42px;
background-position: -494px -490px;
margin-top: -21px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.jp::before {
width: 43px;
height: 36px;
background-position: -704px -284px;
margin-top: -18px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.as::before {
width: 35px;
height: 35px;
background-position: -708px -359px;
margin-top: -17.5px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.eu::before {
width: 40px;
height: 28px;
background-position: -712px -452px;
margin-top: -14px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.ao::before {
width: 36px;
height: 32px;
background-position: -718px -540px;
margin-top: -16px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li dl {
height: 48px;
position: absolute;
top: 50%;
margin-top: -24px;
}
section.banner .center-wrap ul.first-menu>li dt {
height: 26px;
line-height: 26px;
font-size: 18px;
}
section.banner .center-wrap ul.first-menu>li dd {
height: 22px;
line-height: 22px;
font-size: 14px;
}
section.banner .center-wrap ul.second-menu {
width: 356px;
height: 100%;
float: left;
background-color: rgba(0, 0, 0, .6);
color: #FFFFFF;
display: none;
}
section.banner .center-wrap ul.second-menu .cur {
display: block;
}
section.banner .center-wrap ul.second-menu li {
margin-bottom: 20px;
padding: 10px;
}
section.banner .center-wrap ul.second-menu li dt {
font-size: 16px;
color: #FFFFFF;
line-height: 24px;
}
section.banner .center-wrap ul.second-menu li dd a {
color: white;
font-size: 14px;
color: #FFFFFF;
}写回答
1回答
-
好帮手慕久久
2022-10-26
同学你好，样式逻辑不对。代码中，给二级菜单整体section.banner .center-wrap ul.second-menu设置了隐藏，然后让二级菜单子元素显示，这是没用的，父元素整体都隐藏了，子元素肯定看不见。可做如下调整：
祝学习愉快！
0
相似问题