导航列表的颜色为什么没有变呢。。

导航列表的颜色为什么没有变呢。。

控制台里显示有颜色，但就是显示不出来。。子元素也没有设置背景色啊。。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>慕多多</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>

<!-- 站点导航开始 -->

<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="###" target="_blank" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕多多</a></li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">我的慕多多<i class="dropdown-arrow icon transition">&#xe639;</i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition">&#xe639;</i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe639;</i></a>
<ul class="dropdown-layer dropdown-left">
<li class='dropdown-loading'></li>
<!-- <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
<li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
<li><a href="###" target="_blank" class="menu-item">体验中心</a></li> -->
</ul>
</li>
<li class="menu nav-site-service dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition">&#xe639;</i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>

<!-- 站点导航结束 -->

<!-- header区开始 -->

<div class="header">
<div class="container">
<h1 class="fl"><a href="./index.html" class="header-logo text-hidden">慕课网</a></h1>
<div class="search fl" id="header-search">
<form action="https://s.taobao.com/search" class="search-form">
<input type="text" name="q" class="search-inputbox fl" placeholder="灵魂美食一元抢" autocomplete="off" />
<input type="submit" value="搜索" class="search-btn fl">
</form>
<ui class="search-layer">
<!-- <li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li> -->
</ui>
</div>
</div>
</div>

<!-- header区结束 -->

<!-- 主导航开始 -->

<div class="nav-main">
<div class="container">
<a href="##" target="_blacnk" class="link">数码城</a
><a href="##" target="_blacnk" class="link">天黑黑</a
><a href="##" target="_blacnk" class="link">团购</a
><a href="##" target="_blacnk" class="link">发现</a
><a href="##" target="_blacnk" class="link">二手特价</a
><a href="##" class="link">名品汇</a>
</div>
</div>

<!-- 主导航结束 -->

<!-- banner区开始 -->

<div class="banner">
<div class="container cf">
<div class="category fl">
<a href="##" target="_blank" class="category-title"><i class="icon">&#xe60a;</i>商品分类</a>
<ui class="category-list">
<li class="dropdown" data-active="category" data-load="js/category-detail-1.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">家用电器</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-2.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">手机</a
                            >、<a href="###" target="_blank" class="dropdown-link">运营商</a
                            >、<a href="###" target="_blank" class="dropdown-link">数码</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-3.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">电脑</a
                            >、<a href="###" target="_blank" class="dropdown-link">办公</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-4.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">家居</a
                            >、<a href="###" target="_blank" class="dropdown-link">家具</a
                            >、<a href="###" target="_blank" class="dropdown-link">家装</a
                            >、<a href="###" target="_blank" class="dropdown-link">厨具</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-5.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">男装</a
                            >、<a href="###" target="_blank" class="dropdown-link">女装</a
                            >、<a href="###" target="_blank" class="dropdown-link">童装</a
                            >、<a href="###" target="_blank" class="dropdown-link">内衣</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-6.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">化妆</a
                            >、<a href="###" target="_blank" class="dropdown-link">清洁</a
                            >、<a href="###" target="_blank" class="dropdown-link">宠物</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-7.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">运动户外</a
                            >、<a href="###" target="_blank" class="dropdown-link">钟表</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-8.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">汽车</a
                            >、<a href="###" target="_blank" class="dropdown-link">汽车用品</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-9.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">母婴</a
                            >、<a href="###" target="_blank" class="dropdown-link">玩具乐器</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-10.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">食品</a
                            >、<a href="###" target="_blank" class="dropdown-link">酒类</a
                            >、<a href="###" target="_blank" class="dropdown-link">生鲜</a
                            >、<a href="###" target="_blank" class="dropdown-link">特产</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-11.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">医药保健</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-12.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">图书</a
                            >、<a href="###" target="_blank" class="dropdown-link">音像</a
                            >、<a href="###" target="_blank" class="dropdown-link">电子书</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-13.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">彩票</a
                            >、<a href="###" target="_blank" class="dropdown-link">旅行</a
                            >、<a href="###" target="_blank" class="dropdown-link">充值</a
                            >、<a href="###" target="_blank" class="dropdown-link">票务</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-14.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">理财</a
                            >、<a href="###" target="_blank" class="dropdown-link">众筹</a
                            >、<a href="###" target="_blank" class="dropdown-link">白条</a
                            >、<a href="###" target="_blank" class="dropdown-link">保险</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
</ui>
</div>
<div class="carousel fl"></div>
<div class="banner-sidebar fr"></div>
</div>
</div>

<!-- banner区结束 -->
<script>
window.jQuery || document.write("<script src='js/jQuery.js'><\/script>");
</script>
<script src="js/transition.js"></script>
<script src="js/showHide.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/search.js"></script>
<script src="js/index.js"></script>
</body>
</html>
/*常用公共样式*/
	.fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.cf:before,
	.cf:after {
		content: " ";
		display: table;
		
	}
	.cf:after {
		clear: both;
	}
	.cf {
		*zoom: 1;
	}

/* 公共样式 */

	.container{
		width:1200px;
		margin:0 auto;
	}
	a.link{
		color:#4d555d;
	}
	a.link:hover{
		color:#f01414;
	}
	.transition{
		transition:all 0.5s;
		-o-transition:all 0.5s;
		-ms-transition:all 0.5s;
		-moz-transition:all 0.5s;
		-webkit-transition:all 0.5s;
	}
	[class*="-active"] .dropdown-arrow{
		transform:rotate(180deg);
		-o-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
	}
	.text-hidden{
		text-indent:-999px;
		overflow: hidden;
	}
	.text-ellipsis{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}


/* icon */
	@font-face {
		font-family: "iconfont";
		src: url('../font/iconfont.eot?t=1556027603322'); /* IE9 */
		src: url('../font/iconfont.eot?t=1556027603322#iefix') format('embedded-opentype'), /* IE6-IE8 */		/*url('../font/data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),*/
		url('../font/iconfont.woff?t=1556027603322') format('woff'),
		url('../font/iconfont.ttf?t=1556027603322') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
		url('../font/iconfont.svg?t=1556027603322#iconfont') format('svg'); /* iOS 4.1- */
	}

	.icon {
	  font-family: "iconfont" !important;
	  font-size: 14px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}

/* showHide */

	.fadeOut{
		opacity:0;
		visibility: hidden;
	}
	.slideUpDownCollapse{
		height:0 !important;
		padding-top:0 !important;
		padding-bottom:0 !important;
	}
	.slideLeftRightCollapse{
		width:0 !important;
		padding-left:0 !important;
		padding-right:0 !important;
	}

/* dropdown */

	.dropdown{
		position: relative;
	}
	.dropdown-toggle{
		position: relative;
		z-index: 2;
	}
	.dropdown-arrow{
		display: inline-block;
		line-height:1;
		vertical-align: middle;
	}
	.dropdown-layer{
		display: none;
		position: absolute;
		z-index: 1;
	}
	.dropdown-left{
		left:0;
		right:auto;
	}
	.dropdown-right{
		left:auto;
		right:0;
	}
	[class*="-active"] .dropdown-arrow{
		transform:rotate(180deg);
		-o-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
	}
	.dropdown-loading{
		width:32px;
		height:32px;
		background:url(../img/loading.gif) no-repeat;
		margin:20px;
	}

/* menu-dropdown */

	.menu .dropdown-toggle{
		display: block;
		height:100%;
		padding:0 13px 0 12px;
		border-left:1px solid #f3f5f7;
		border-right:1px solid #f3f5f7;
	}
	.menu .dropdown-arrow{
		margin-left:5px;
	}
	.menu .dropdown-layer{
		top:43px;
		background-color:#fff;
		border:1px solid #cdd0d4;
	}
	.menu-item{
		display: block;
		height:30px;
		line-height: 30px;
		white-space:nowrap;
		padding:0 12px;
		color:#4d555d;
	}
	.menu-item:hover{
		background-color: #f3f5f7;
	}
	.menu-active .dropdown-toggle{
		background-color: #fff;
		border-color:#cdd0d4;
	}

/* search */

	.search{
		position: relative;
		border:1px solid #cfd2d5;
	}
	.search-inputbox{
		width:585px;
		height:40px;
		line-height: 40px;
		padding:0 10px;
		border:none;
		background-color:#fff;
	}
	.search-btn{
		width:73px;
		height:40px;
		font-size:14px;
		color:#fff;
		background-color:#ca003f;
		border:none;
		line-height: 40px;
		text-align:center;
		cursor:pointer;
	}
	.search-layer{
		display: none;
		position: absolute;
		top:100%;
		left:-1px;
		width:100%;
		background-color:#fff;
		border:1px solid #cfd2d5;

	}
	.search-layer-item{
		height:24px;
		line-height: 24px;
		padding:0 10px;
		cursor: pointer;
		
	}
	.search-layer-item:hover{
		background-color:#f3f5f7;
	}

/* category */

.category{
	width:208px;
	margin-top:-62px;
	font-size:14px;
}
.category-title{
	display: block;
	height:54px;
	line-height: 54px;
	padding:0 20px;
	background-color:#c1043f;
	color:#fff;
}
.category-title .icon{
	margin-right:10px;
	font-size:16px;
}
.category-list{
	height:512px;
	background-color:#ca003f;
}
.category .dropdown-toggle{
	height:36px;
	line-height: 36px;
	padding-left:16px;
	color:#fff;
}
.category .dropdown-link{
	color:#fff;
}
悄然于心 2019-04-29
源自： 实战：中心focus区域组件化   1-3 商品分类的css样式
4
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

3回答
好帮手慕星星 2019-04-30 13:46:10

你好，是标签名称写错了：

http://img1.sycdn.imooc.com//climg/5cc7e1060001efca09010401.jpg

修改成ul之后就会显示背景颜色了：

http://img1.sycdn.imooc.com//climg/5cc7e11d00015abe02910526.jpg

可以测试下。

0
收起回答
好帮手慕星星 2019-04-30 09:52:36

同学你好，说的是导航下拉菜单中的列表颜色吗？

http://img1.sycdn.imooc.com//climg/5cc7aa180001745007600815.jpg

这个颜色是#4d555d，显示出来了，没有问题。

如果老师描述的有问题，建议同学详细的说明一下，便于准确定位问题所在，帮助你解决。

同学能够自己解决小箭头的问题是很棒的哦！

祝学习愉快！

0
收起回答
  • 提问者 悄然于心 #1
    是侧边导航的背景，显示不出来。。
    2019-04-30 12:01:05
  • 提问者 悄然于心 #2
    是侧边导航的背景，显示不出来。。
    2019-04-30 12:01:06
提问者 悄然于心 2019-04-29 23:16:09

写完右侧小箭头样式后 鼠标挪上去箭头会自动旋转。。

.category .dropdown-arrow{
		position: absolute;
		top:12px;
		right:12px;
		font-weight:bold;
		font-family:simsun;
	}


0
收起回答
  • 提问者 悄然于心 #1
    箭头已解决。。在公共样式里多写了一份，导致删除dropdown下的样式不起作用。。
    2019-04-29 23:36:27
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为啥我的每个表格框的颜色也都会变？
0 0 3
top区域下拉时，导航里的字没了，求解
0 0 3
为什么CSS选择器下面的无序列表颜色没有变化
19 0 3
我想问一下，代码里的div有几个，为什么只有框里的变了颜色呢
0 0 3
为什么我的代码运行显示不正确？菜单栏不显示背景色
13 0 4

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师