老师请检查
来源：2-12 项目作业
迷迷糊糊学习
2021-12-07 19:39:47
相关代码：
*{
padding: 0;
margin: 0;
}
.banner{
position: relative;
}
.banner img{
width: 100%;
/* 使用min-width 限制最小宽度 */
min-width: 1152px;
/* 图片和底部可能产生一点缝隙，此时可以使用一个小技巧*/
/* 这是一个小技巧，添加上图片就不会有缝隙了
垂直居中 */
vertical-align: middle;
}
/* 给居中的盒子设置样式 */
.banner .wrap{
position: absolute;
top: 0;
left: 50%;
margin-left: -576px;
height: 100%;
width: 1152px;
}
/* 取消小圆点 */
.banner .wrap .banner-nav ul{
list-style: none;
}
/* 取消倾斜 */
/* 后面还需要定义列表，所以这里写后代选择器 */
.banner .wrap .banner-nav ul li>dl>dd em{
font-style: normal;
}
.banner .wrap .banner-nav{
height: 100%;
}
.banner .wrap .banner-nav>ul{
height: 100%;
}
.banner .wrap .banner-nav>ul>li{
height: 16.66%;
width: 296px;
background-color: rgba(0, 0, 0, 0.53);
border-bottom: 1px solid #9e9e9e;
/* box-sizing: border-box;属性的作用就是让height属性是盒子的总高度，这种情况：在盒子的高度是百分比写的 */
/* 此时就要让盒子的边框涵盖在height里面，就要使用box-sizing: border-box; */
box-sizing: border-box;
}
.banner .wrap .banner-nav>ul>li:last-child{
border-bottom:none
}
.banner .wrap .leftbtn{
position: absolute;
top:50%;
margin-top:-22px;
left:-38px;
width: 28px;
height: 44px;
background:url(img/icons.png) no-repeat -21px -94px;
}
.banner .wrap .rightbtn{
position: absolute;
top:50%;
margin-top:-22px;
right:-38px;
width: 28px;
height: 44px;
background:url(img/icons.png) no-repeat -21px -29px;
}
.banner .center-wrap .leftbtn:hover,.banner .center-wrap .rightbtn:hover{
/* 透明度 */
opacity: 0.8;
}
.banner .wrap .banner-nav>ul>li{
position:relative;
}
.banner .wrap .banner-nav>ul>li>dl{
position: absolute;
height: 48px;
top: 50%;
margin-top: -24px;
left: 42px;
color: white;
}
.banner .wrap .banner-nav>ul>li>dl>dt{
font-size: 18px;
height: 26px;
line-height: 26px;
}
.banner .wrap .banner-nav>ul>li>dl>dt>dd{
font-size: 16px;
height: 22px;
line-height: 22px;
}
.banner .wrap .banner-nav>ul>li::before{
content: "";
position: absolute;
top:50%;
left: 10px;
background-image: url(img/icons.png) ;
}
.banner .wrap .banner-nav>ul>li.hot::before{
width: 22px;
height: 18px;
background-position: -29px -399px;
margin-top: -9px;
}
.banner .wrap .banner-nav>ul>li.hk::before{
width: 18px;
height: 21px;
background-position: -28px -217px;
margin-top: -10.5px;
left: 13px;
}
.banner .wrap .banner-nav>ul>li.jp::before{
width: 24px;
height: 19px;
background-position: -25px -171px;
margin-top: -9.5px;
}
.banner .wrap .banner-nav>ul>li.as::before{
width: 18px;
height: 19px;
background-position: -28px -262px;
margin-top: -9.5px;
left: 12px;
}
.banner .wrap .banner-nav>ul>li.eu::before{
width: 20px;
height: 14px;
background-position: -29px -351px;
margin-top: -7px;
}
.banner .wrap .banner-nav>ul>li.au::before{
width: 18px;
height: 17px;
background-position: -28px -305px;
margin-top: -8.5px;
left: 12px;
}
.banner .wrap .banner-nav>ul>li .menu{
display: none;
position: absolute;
top: 0;
left: 296px;
width: 356px;
height:524.5px;
background-color:rgba(0, 0, 0, 0.63);
color: white;
padding: 16px;
box-sizing: border-box;
}
.banner .wrap .banner-nav>ul>li:hover .menu{
display: block;
}
.banner .wrap .banner-nav>ul>li .menu a{
color: white;
text-decoration: none;
}
.banner .wrap .banner-nav>ul>li.hot .menu>dl,
.banner .wrap .banner-nav>ul>li.hk .menu>dl
{
margin-bottom:16px;
}
.banner .wrap .banner-nav>ul>li.hot .menu>dl>dt,
.banner .wrap .banner-nav>ul>li.hk .menu>dl>dt{
line-height: 30px;
font-size: 18px;
}
.banner .wrap .banner-nav>ul>li.hot .menu>dl>dd,
.banner .wrap .banner-nav>ul>li.hk .menu>dl>dd{
line-height: 25px;
font-size: 15px;
}
.banner .wrap .banner-nav>ul>li.hk .menu{
top: -87px;
}
.banner .wrap .banner-nav>ul>li:hover .hk{
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>Document</title> <link rel="stylesheet" href="./css.css"> </head> <body> <!-- banner --> <section class="banner"> <img src="./img/banner2.jpg" alt=""> <!--先设置一个版心盒子居中 --> <div class="wrap"> <!-- 左右按钮 --> <a href="" class="leftbtn"></a> <a href="" class="rightbtn"></a> <!-- 设置左浮动 --> <nav class="banner-nav"> <ul> <li class="hot"> <dl> <dt>热门出发地</dt> <dd> <em>北京</em> <em>上海</em> <em>广深</em> <em>西南</em> <em>国内其他</em> </dd> </dl> <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> <a href="">呼伦贝尔草原</a> <a href="">希拉穆仁草原</a> <a href="">大理日游</a> <a href="">杭州</a> <a href="">重庆两江夜游船票</a> </dd> </dl> </div> </li> <li class="hk"> <dl> <dt>港澳台 国内</dt> <dd> <em>香港</em> <em>澳门</em> <em>台湾</em> <em>国内其他</em> </dd> </dl> <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> </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> </dd> </dl> </li> <li class="eu"> <dl> <dt>欧洲 美洲</dt> <dd> <em>英国</em> <em>法国</em> <em>美国</em> <em>加拿大</em> </dd> </dl> </li> <li class="au"> <dl> <dt>澳新 中东非</dt> <dd> <em>澳大利亚</em> <em>新西兰</em> <em>迪拜</em> </dd> </dl> </li> </ul> </nav> </div> </section> </body> </html>
问题描述：
问题描述：我用的是hover的办法，将二级菜单分别放到一级菜单的li中，先设置二级菜单为display：none，点击后设置为block，但是因为绝对定位的原因，二级菜单的父元素是每一个对应的li，导致我二级菜单的top值和二级菜单的宽都是手动计算的，不是很严谨。请问需要怎么优化呢。 另外那个图二的港澳台 国内，是需要点击出现二级菜单的同是，背景颜色也要改变吗， 还有没有什么其他的办法来实现二级菜单呢，比如浮动什么的？
写回答
1回答
-
同学你好，对于你的问题解答如下：
1、将二级菜单分别放到对应的一级菜单下是可以的，代码效果实现是可以的
2、暂无更好优化方法，目前使用css实现鼠标移入一级菜单，让二级菜单显示出来就可以了。
3、不需要改变，重点是实现移入一级菜单，显示对应的二级菜单即可，暂无其他办法，后面学习了js后，老师会讲解如何通过js实现效果的，到时候再重点学习下
祝学习愉快~
0
相似问题