为什么nav中的小三角没有被盖住呢
来源：2-7 使用CSS制作菜单
芜湖呼
2022-03-14 19:43:24
<!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="暮云游商城有十多年旅游行业经验，为您提供全方位旅游服务" /> <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="javaScript:;">目的地</a> </li> <li> <a href="javaScript:;">锦囊</a> </li> <li class="have-menu"> <a href="javaScript:;">社区</a> <em class="arrow"> <b></b> <i></i> </em> <div class="menu sqmenu"> <ul class="menu-list"> <li> <a href="javaScript:;">旅行论坛</a> </li> <li> <a href="javaScript:;">旅行专栏</a> </li> <li> <a href="javaScript:;">旅行问答</a> </li> <li> <a href="javaScript:;">旅行生活分享平台</a> </li> <li> <a href="javaScript:;">JNE旅行生活美学</a> </li> <li> <a href="javaScript:;">Biu伴（原结伴同游）</a> </li> <li> <a href="javaScript:;">负责任的旅行</a> </li> <li> <a href="javaScript:;">特别策划</a> </li> </ul> </div> </li> <li> <a href="javaScript:;">行程助手</a> </li> <li class="have-menu"> <a href="javaScript:;">商城</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="javaScript:;">酒店·民宿</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="javaScript:;">特价酒店</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> </li> <li> <a href="">优惠机票</a> </li> <li class="have-menu"> <a href="">跟团游</a> </li> <li> <a href="">酒店</a> </li> <li class="have-menu"> <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 class="have-menu"> <a href="">深度旅游</a> </li> <li> <a href="">私人定制</a> </li> </ul> </div> </nav> <div class="header-con"> <div class="center-wrap"> <h1>暮云游商城</h1> <input type="text" placeholder="查询目的地/酒店/机票攻略" /> <a href="" class="iconfont"></a> </div> </div> </header> </body> </html>
.site-head {
height: 150px;
}
.site-head .topbar {
background: #2a2a2a;
height: 32px;
line-height: 32px;
color: white;
}
.site-head .topbar a {
color: white;
}
.site-head .topbar .center-wrap .shortcut-links {
float: left;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li {
float: left;
margin-right: 18px;
font-size: 14px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu {
padding-right: 12px;
position: relative;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu em {
width: 12px;
height: 12px;
/* background-color: orange; */
position: absolute;
top: 50%;
margin-top: -6px;
right: 0;
transition: transform 0.3s linear 0s;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu:hover em {
transform: rotate(180deg);
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu em b {
position: absolute;
left: 2px;
top: 0px;
width: 8px;
height: 8px;
background-color: #fff;
transform: rotate(45deg);
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu em i {
position: absolute;
left: 2px;
top: -2px;
width: 8px;
height: 8px;
background-color: #2a2a2a;
transform: rotate(45deg);
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu {
display: none;
position: absolute;
background-color: #fff;
font-size: 12px;
padding: 8px;
line-height: 20px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu li {
height: 20px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu li:hover a {
color: orange;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .sqmenu {
width: 121px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .scmenu {
width: 76px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .jdmsmenu {
width: 64px;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu:hover .menu {
display: block;
}
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu ul li a {
color: black;
}
.site-head .topbar .center-wrap .topbar-r {
float: right;
width: 225px;
}
.site-head .topbar .center-wrap .topbar-r a,
.site-head .topbar .center-wrap .topbar-r span {
margin-right: 11px;
font-size: 15px;
}
.site-head .topbar .center-wrap .topbar-r a:last-child {
margin-right: 0;
}
.site-head .main-nav {
background-color: #20bd9a;
height: 40px;
}
.site-head .main-nav .center-wrap ul li {
float: left;
margin-right: 18px;
line-height: 40px;
}
.site-head .main-nav .center-wrap ul li a {
color: #ffffff;
}
.site-head .main-nav .center-wrap ul li.have-menu {
padding-right: 16px;
position: relative;
}
.site-head .main-nav .center-wrap ul li.have-menu::before {
content: '';
border: 6px solid transparent;
border-top-color: #ffffff;
position: absolute;
right: 0;
top: 18px;
width: 0;
height: 0;
border-bottom: none;
transition: transform 0.5s linear 0s;
}
.site-head .main-nav .center-wrap ul li.have-menu:hover::before {
transform: rotate(180deg);
}
.site-head .header-con {
height: 78px;
}
.site-head .header-con h1 {
color: #20bd9a;
font-size: 34px;
line-height: 78px;
float: left;
margin-right: 20px;
}
.site-head .header-con input {
float: left;
width: 405px;
height: 30px;
line-height: 78px;
border: 2px solid #20bd9a;
border-radius: 4px 0 0 4px;
outline: none;
margin: 22px 0;
}
.site-head .header-con a {
float: left;
background-color: #20bd9a;
width: 32px;
height: 34px;
line-height: 78px;
border-radius: 0 4px 4px 0;
margin: 22px 0;
line-height: 34px;
text-align: center;
color: #fff;
}/*
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;
}@font-face {
font-family: 'PingFangSCRegular';
src: url(../fonts/PingFangSCRegular.ttf) format(truetype);
src: url(../fonts/iconfont.eot) format(truetype);
src: url(../fonts/iconfont.json) format(truetype);
src: url(../fonts/iconfont.svg) format(truetype);
src: url(../fonts/iconfont.ttf) format(truetype);
src: url(../fonts/iconfont.woff) format(truetype);
src: url(../fonts/iconfont.woff2) format(truetype);
}
@font-face {
font-family: 'iconfont';
src: url('../fonts/ali-font/iconfont.ttf?t=1646997591627') format('truetype');
}
body {
font-family: 'PingFangSCRegular';
}
/* 版心 */
.center-wrap {
width: 1152px;
margin: 0 auto;
}
.clearfix {
overflow: hidden;
}
.clearfix::after {
content: '';
display: block;
clear: both;
overflow: hidden;
}
.tac {
text-align: center;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.iconfont {
font-family: 'iconfont' !important;
font-size: 20px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}写回答
1回答
-
好帮手慕慕子
2022-03-15
同学你好，因为小三角的默认显示层级高于前面的元素，所以不会被覆盖。
建议修改：给topbar中的下拉菜单添加z-index属性，提升显示层级，如下：
祝学习愉快~
1
相似问题