老师请看下我这里的菜单内容为什么不显示？
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>
<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">
<!-- 左右浮动 左边为导航条 "shortcut-link"为“快捷超级链接”-->
<nav class="shortcut-link">
<ul>
<li>
<a href="">目的地</a>
</li>
<li>
<a href="">锦囊</a>
</li>
<li class="have-menu">
<a href="">社区</a>
<!-- 两个盒子压盖 “arrow”箭头 -->
<em class="arrow">
<b></b>
<i></i>
</em>
<div class="menu sqmenu">
<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="#">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>
</li>
<li class="have-menu">
<a href="">酒店·民宿</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
<li>
<a href="">特价酒店</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 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>
<!-- 搜索框浮动 -->
<div class="soso-box">
<input type="text" placeholder="查询目的地/酒店/机票攻略"><a href="" class="btn iconfont"></a>
<!-- 右边按钮 -->
</div>
</div>
</div>
</header>
</body>
</html>
css.css相关代码：
.site-head {
height: 150px;
}
.site-head .topbar {
height: 32px;
background-color: #2A2A2A;
/* a标签不能从父亲继承颜色，所以此处设置颜色不会改变a标签的颜色 */
color: white;
/* 垂直居中 行高=盒子高 */
line-height: 32px;
}
.site-head .topbar a {
color: white;
}
.site-head .topbar .shortcut-link {
float: left;
}
.site-head .topbar shortcut-link ul {
}
/* li中会有下拉菜单也是ul嵌套li，所以不能用后代选择器，要用子选择器，表示shortcut-link盒子的儿子ul的子标签li进行浮动 */
.site-head .topbar .shortcut-link>ul>li{
float: left;
margin-right: 18px;
font-size: 14px;
}
.site-head .topbar .shortcut-link>ul>li.have-menu{
padding-right: 12px;
position: relative;
}
/* 给arrow绝对定位 */
.site-head .topbar .shortcut-link>ul>li.have-menu .arrow {
position: absolute;
right: 0;
/* 垂直居中 */
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
}
/* 鼠标触碰时箭头旋转 */
.site-head .topbar .shortcut-link>ul>li.have-menu:hover .arrow {
transform: rotate(180deg);
transition: transform .2s ease 0s;
}
/* 2个盒子重叠制作下拉符 */
.site-head .topbar .shortcut-link>ul>li.have-menu .arrow b {
position: absolute;
left: 4px;
top: 2px;
width: 6px;
height: 6px;
background-color: #FFF;
transform: rotate(45deg);
}
.site-head .topbar .shortcut-link>ul>li.have-menu .arrow i {
position: absolute;
left: 4px;
top: 0.5px;
width: 6px;
height: 6px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
/* 每个menu宽度不一样，先设置共性 */
.site-head .topbar .shortcut-link>ul>li.have-menu .menu{
position: absolute;
left: 0px;
top:30px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
/* 能压盖住下方 */
z-index: 9999;
/* 先隐藏，鼠标触碰之后再出现 */
display: none;
}
/* 在设置个性 */
.site-head .topbar .shortcut-link>ul>li.have-menu .sqmenu{
width: 121px;
}
/* 鼠标触碰have menu盒子之后，menu才出现 */
.site-head .topbar .shortcut-link>ul>li.have-menu:hover .menu {
display: block;
}
.site-head .topbar .shortcut-link >ul > li.have-menu:hover .menu .menu-list{
font-size: 12px;
color: #1C1F21;
line-height: 18px;
}
.site-head .topbar .topbar-r {
float: right;
width: 225px;
}
.site-head .topbar .topbar-r a, .site-head .topbar .topbar-r span {
margin-right: 11px;
font-size: 14px;
}
.site-head .topbar .topbar-r a:last-child {
margin-right: 0;
}
.site-head .main-nav {
height: 40px;
background-color: #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 a {
line-height: 40px;
color: white;
font-size: 16px;
}
/* 使用绝对定位制作箭头 */
.site-head .main-nav ul li.have-menu::before {
content: '';
position: absolute;
right: 0;
top: 18px;
/* 盒子无宽高，边框为5px，盒模型外扩，所以盒子宽高就是10px，边框透明,上边框为白色，即三角形 */
width: 0px;
height: 0px;
border: 5px solid transparent;
/* 去掉下边框，盒子就不是正方形了，旋转的时候更美观 */
border-bottom: none;
border-top-color:white;
transition: transform .5s ease 0s;
}
.site-head .main-nav ul li.have-menu:hover::before {
transform: rotate(180deg);
}
/* 页面顶部主要内容 */
.site-head .header-con {
height: 36px;
padding: 21px 0;
}
.site-head .header-con h1 {
float: left;
font-size: 24px;
color: #20BD9A;
line-height: 36px;
font-weight: bold;
}
.site-head .header-con .soso-box {
float: left;
margin-left: 20px;
width: 405px;
/* 输入框未垂直居中，因为文字被行高挤下去了，文本框无用，需要用margin或者padding去挤 */
margin-top: 2px;
}
.site-head .header-con .soso-box input {
width: 361px;
height: 30px;
border: 1px solid #20BD9A;
/* 与搜索符链接的2个角不需要圆角，所以4个圆角需要单独设置，分别为坐上 右上 右下 左下*/
border-radius: 4px 0 0 4px;
font-size: 14px;
/* 鼠标点击文本框会有一条外线，需要取消默认的外线（外线是文本框特有的东西） */
outline: none;
padding-left: 10px;
}
.site-head .header-con .soso-box .btn {
/* a标签不能设置宽高，需要转成行内块 */
display: inline-block;
position: absolute;
height: 32px;
width: 30px;
background-color: #20BD9A;
color: white;
text-align: center;
line-height: 32px;
font-size: 18px;
border-radius: 0 4px 4px 0;
}
base.css相关代码：
.clearfix {
overflow: hidden;
}
.clearfix::after {
content: '';
display: block;
clear: both;
overflow: hidden;
}
@font-face {
font-family: PingFangSC-Regular;
src: url('../fonts/PingFangSCRegular.ttf') format('turetipe');
}
/* 定义字体图标 */
@font-face {
font-family: 'iconfont';
src: url(../fonts/iconfont.ttf) format('truetype');
}
/* 定义iconfont的样式 */
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: PingFangSC-Regular;
}
/* 元素居中 wrap表示包容器*/
.center-wrap {
width: 1152px;
margin: 0 auto;
}
/* 不建议使用原子类，类名丑陋且 长 */
/* .mgt10 {
margin-top: 10px;
}
.mgt12 {
margin-top: 12px;
}
.mgt14 {
margin-top: 14px;
} */
/* 文字居中 */
.tac {
text-align: center;
}
/* 转块 */
.db {
display: block;
}
/* 转行内块 */
.dib {
display: inline-block;
}
相关截图：
14
收起
正在回答
1回答
同学你好，菜单中的内容不显示，是因为菜单中的a标签继承了白色的字体颜色，而菜单的背景颜色也为白色，如图所示
建议单独给下拉菜单中的a标签设置字体颜色即可，参考如下
祝学习愉快！
相似问题
请问为什么移入二级菜单还是没显示出来。
18
0
3
老师，为什么我的下拉菜单不显示呢？
20
0
3
老师，请问这个jquery的部分为什么二级菜单出不来
15
0
3
滑过主菜单显示问题
0
0
4
我的菜单无法显示啊
10
0
4
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星