老师，请检查
来源：2-7 使用CSS制作菜单
慕芸芸
2022-12-15 11:26:16
<!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="慕云游商城有10多年的旅游行业经验，为您提供全方位的旅游服务"> <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="#">目的地</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> <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> <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> <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="nav-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="" class="iconfont">登录</a> <a href="" class="iconfont">注册</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;
line-height: 32px;
background: #2A2A2A;
}
.site-head .topbar a {
color: white;
}
.site-head .topbar .nav-r{
float: right;
width: 225px;
}
.site-head .topbar .nav-r a,.site-head .topbar .nav-r span{
margin-right: 12px;
color: white;
font-size: 14px;
}
.site-head .topbar .nav-r a:last-child{
margin-right: 0px;
}
.site-head .topbar .shortcut-links {
float: left;
}
.site-head .topbar .shortcut-links>ul>li {
float: left;
margin-right: 18px;
font-size: 14px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu {
position: relative;
padding-right: 12px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .arrow {
position: absolute;
top: 50%;
right: 0;
margin-top: -6px;
width: 12px;
height: 12px;
/* background-color: orange; */
transition: transform 0.2s linear 0s;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .arrow>b {
position: absolute;
top: 2px;
left: 4px;
width: 6px;
height: 6px;
background: white;
transform: rotate(45deg);
}
.site-head .topbar .shortcut-links>ul>li.have-menu .arrow>i {
position: absolute;
top: 0px;
left: 4px;
width: 6px;
height: 6px;
background: #2A2A2A;
transform: rotate(45deg);
}
.site-head .topbar .shortcut-links>ul>li.have-menu:hover .arrow {
transform: rotate(180deg);
}
.site-head .topbar .shortcut-links>ul>li.have-menu .menu{
display: none;
position: absolute;
top: 32px;
left: 0;
/* height: 168px; */
background: orange;
z-index: 9999;
background: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
padding: 10px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .menu ul li{
height: 20px;
line-height: 20px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .menu ul li a{
font-size: 12px;
color: #1C1F21;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .menu ul li a:hover{
color: orange;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .sqmenu{
width: 114px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .scmenu{
width: 76px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .jdmsmenu{
width: 64px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu:hover .menu{
display: block;
}
.site-head .main-nav {
height: 40px;
line-height: 40px;
background: #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.have-menu::after {
content: '';
position: absolute;
top: 18px;
right: 0;
/* margin-top: -5px; */
width: 0px;
height: 0px;
border: 5px solid transparent;
border-top-color: white;
border-bottom: 0;
transition: transform 0.1s linear 0s;
}
.site-head .main-nav ul li.have-menu:hover::after {
transform: rotate(180deg);
}
.site-head .main-nav ul li.have-menu .menu {
display: none;
position: absolute;
top: 35px;
left: 0;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
background-color: white;
padding: 10px;
}
.site-head .main-nav ul li.have-menu:hover .menu{
display: block;
}
.site-head .main-nav ul li.have-menu .menu dl dt{
font-weight: bold;
font-size: 14px;
}
.site-head .main-nav ul li.have-menu .menu dl dd a{
color: #1C1F21;
font-size: 12px;
}
.site-head .main-nav ul li.have-menu .menu dl dd a:hover{
color: orange;
}
.site-head .main-nav ul li.have-menu .jjzyxmenu{
width: 140px;
}
.site-head .main-nav ul li.have-menu .gtymenu{
width: 86px;
}
.site-head .main-nav ul li.have-menu .ddwlmenu{
width: 152px;
}
.site-head .main-nav ul li.have-menu .sdlymenu{
width: 98px;
}
.site-head .main-nav ul li a {
color: white;
}
.site-head .header-con {
height: 36px;
padding: 21px 0;
}
.site-head .header-con h1 {
float: left;
width: 120px;
height: 36px;
font-size: 24px;
color: #20BD9A;
text-align: justify;
line-height: 36px;
font-weight: bold;
}
.site-head .header-con .soso-box{
float: left;
margin-left: 20px;
padding-top: 4px;
width: 405px;
height: 30px;
}
.site-head .header-con .soso-box input{
float: left;
width: 361px;
height: 28px;
border: 1px solid #20BD9A;
border-radius: 4px 0 0 4px;
outline: none;
font-size: 12px;
padding-left: 10px;
}
.site-head .header-con .soso-box .btn{
float: left;
width: 32px;
height: 30px;
background: #20BD9A;
color: white;
line-height: 30px;
text-align: center;
border-radius: 0 4px 4px 0;
}写回答
1回答
-
好帮手慕久久
2022-12-15
同学你好，效果还不错，可以优化一下：
如下列表，宽度建议增大些，让同一个a标签中的内容不要换行显示：
另外，每行内容高度有点大，建议调整一下行高。
综上，代码如下:
祝学习愉快！
0
相似问题