老师可以帮忙检查一下吗？为什么样式部分显示不出来了呀？

首页课程实战体系课手记专栏慕课教程

来源：3-5 让菜单下拉

hyperse

2019-07-01 11:11:31

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛幕淘</a></li>

</ul>

<li><a href="###" target="_blank" class="dropdown-item">已买到的宝贝</a></li>

</ul>

</li>

<li><a href="###" target="_blank" class="dropdown-item">收藏的店铺</a></li>

<li><a href="###" target="_blank" class="dropdown-item">收藏的宝贝</a></li>

</ul>

</li>

</li>

<li><a href="###" target="_blank" class="dropdown-item">已卖出的宝贝</a></li>

<li><a href="###" target="_blank" class="dropdown-item">出售中的宝贝</a></li>

<li><a href="###" target="_blank" class="dropdown-item">卖家服务市场</a></li>

</ul>

</li>

<li><a href="###" target="_blank" class="dropdown-item">消费者客服</a></li>

</ul>

</li>

</ul>

</div>

</div>

</body>

window.jQuery || document.write('<script src="js/jquery.js"><\/script>');

</script>

</html>

/* 基于很多不同项目都可以通用的样式 */

/*css reset*/

/*清除内外边距*/

body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/

ul, ol, li, dl, dt, dd, /*列表元素*/

form, fieldset, legend, input, button, select, textarea, /*表单元素*/

th, td, /*表格元素*/

pre {

padding: 0;

margin: 0;

}

/*重置默认样式*/

body, button, input, select, textarea {

/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/

color: #333;

font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;

}

h1, h2, h3, h4, h5, h6 {

font-size: 100%;

font-weight: normal;

}

em, i {

font-style: normal;

}

a {

text-decoration: none;

}

li {

list-style-type: none;

vertical-align: top;

}

img {

border: none;

/*display: block;*/

vertical-align: top;

}

textarea {

overflow: auto;

resize: none;

}

table {

border-spacing: 0;

border-collapse: collapse;

}

/*常用公共样式*/

.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;

}

.link{

color: #4d555d;

}

.link:hover{

color: #f01414;

}

/* 仅适用于首页的样式 */

/* nav-site站点导航样式 */

.nav-site{

width:100%;

background-color: #f3f5f7;

}

.nav-site .container{

height: 44px;

line-height: 44px;

border-bottom: 1px solid #cdd0d4;

}

.nav-site-login{

color: #f01414;

margin-left: 15px;

}

.nav-site-signup,

.nav-site-mobile{

margin-left: 10px;

}

.nav-site-category{

margin: 0 10px;

}

.nav-site-service{

margin-right: 15px;

}

/* dropdown样式 */

.dropdown{

position: relative;

}

.dropdown-toggle{

position: relative;

z-index: 2;

display: none;

height: 100%;

padding: 0 16px 0 12px;

border-left: 1px solid #f3f5f7;

border-right: 1px solid #f3f5f7;

}

.dropdown-arrow{

display: inline-block;

width: 8px;

height: 6px;

background: url(../img/dropdown-arrow.png) no-repeat;

margin-left: 8px;

vertical-align: middle;

}

.dropdown-layer{

display: block;

position: absolute;

z-index: 1;

top: 43px;

background: #ffffff;

border: 1px solid #cdd0d4;

}

.dropdown-left{

left: 0;

right: auto;

}

.dropdown-right{

right: 0;

left: auto;

}

.dropdown-item{

display: block;

height: 30px;

line-height: 30px;

padding: 0 12px;

color: #4d555d;

white-space: nowrap; /*不管文字多长都不换行*/

}

.dropdown-item:hover{

background-color: #f3f5f7;

}

/*.dropdown-active .dropdown-toggle{

background-color: #fff;

border-color: #cdd0d4;

}

.dropdown-active .dropdown-arrow{

background-image:url(../img/dropdown-arrow-active.png);

}

.dropdown-active .dropdown-layer{

display:block ;

}*/

.dropdown:hover

.dropdown-active .dropdown-toggle,

.dropdown:hover .dropdown-toggle{

background-color: #FFFFFF;

border-color: #cdd0d4;

}

.dropdown-active .dropdown-arrow,

.dropdown:hover .dropdown-arrow{

background-image:url(../img/dropdown-arrow-active.png);

}

.dropdown-active .dropdown-layer,

.dropdown:hover .dropdown-layer{

display: block;

}

//$('.dropdown').hover(function(){

// var $dropdown = $(this);

// $dropdown.find('.dropdown-toggle').css({

// 'background-color':'#ffffff',

// 'border-color':'#ccd0d4'

// });

// $dropdown.find('.dropdown-arrow').css({

// 'background-image':'url(img/dropdown-arrow-active.png)'

// });

// $dropdown.find('droplayer').show();

//},function(){

// var $dropdown = $(this);

// $dropdown.find('dropdown-toggle').css({

// 'background-color':'',

// 'border-color':'#f3f5f7'

// });

// $dropdown.find('.dropdown-arrow').css({

// 'background-image':'url(img/dropdown-arrow.png)'

// });

// $dropdown.find('.dropdown-layer').hide();

//});

//第二种方法

//$('dropdown').hover(function(){

// $(this).addClass('dropdown-active');

//},function(){

// $(this).removeClass('dropdown-active');

//});

//第三种方法：用hover

jquery文件引入就下载的源码里面的

写回答

1回答

好帮手慕星星

2019-07-01

已采纳

你好，是css样式中导航项和子菜单显示与隐藏设置相反了，参考修改：

默认应该是导航显示，子菜单隐藏，然后再通过hover显示出来。

自己重新测试下，祝学习愉快！

0 学习 · 14456 问题

查看课程

相似问题

pxcook不能把测试出的样式信息复制下来吗？

回答 2

老师帮我看下，第三种hover方式~为什么dropdown-layer出不来呢

回答 2

老师号，加载部分时候显示的转圈图片是怎么加入

回答 3

样式用csscomb插件美化以后，不能保存美化话的样式

回答 2

老师，为什么js代码没有作用

回答 3

打开慕课网App查看更多内容