关于下拉菜单的一些疑问
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>慕课网</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 头部导航部分-->
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="image/logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">生日 <span class="caret"></span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">婚礼 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">专用 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">商铺 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="icon-right">
<div class="icon-right-item">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<div class="icon-right-hide hide-item1">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">搜</span>
</div>
</div>
</div>
<div class="icon-right-item">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="icon-right-hide hide-item2">
<div class="input-group">
<div class="email">
</div>
<input type="email" class="form-control">
<div class="password">
Password
</div>
<input type="password" class="form-control">
<input type="submit" class="form-control logo-in" value="登录" >
<input type="checkbox" name=""><span>记住</span><br>
<div class="content">新用户？<span>注册</span> | 忘记密码</div>
</div>
</div>
</div>
<div class="icon-right-item">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
<div class="icon-right-hide hide-item3"></div>
</div>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
/*导航处的样式*/
.navbar-default{
background-color: #5D4B33;
position: relative;
}
.navbar-default .navbar-nav>li{
height: 100%;
}
.navbar-default .navbar-nav>li>a{
color: white;
}
.navbar-default .navbar-nav>.active{
background-color:#F07818;
}
/*右边icon的样式*/
.icon-right{
position: absolute;
top: 15px;
right: 10%;
color: white;
font-size: 18px;
}
.icon-right>.icon-right-item{
display: inline-block;
height: 100%;
padding-left: 15px;
margin-left: 10px;
border-left: 1px solid gray;
position: relative;
}
.icon-right>.icon-right-item:hover .icon-right-hide{
visibility:visible;
}
.icon-right>.icon-right-item>.icon-right-hide{
visibility:hidden;
}
.icon-right>.icon-right-item>.hide-item1{
width: 250px;
text-align: center;
height: 60px;
top: 50px;
left: -20px;
position: absolute;
width: 200px;
}
.icon-right>.icon-right-item>.hide-item1>.input-group>input{
border:2px solid #F07818;
height: 30px;
}
.icon-right>.icon-right-item>.hide-item1>.input-group span{
color: white;
background-color: #F07818;
height: 30px;
}
.icon-right>.icon-right-item>.hide-item2{
position: absolute;
top: 50px;
left: -140px;
color: black;
width: 300px;
font-size: 15px;
}
.icon-right>.icon-right-item>.hide-item2 .logo-in{
background-color: #F07818;
color: white;
margin-top: 15px;
margin-bottom: 5px;
}
.icon-right>.icon-right-item>.hide-item2 .content{
text-align: center;
}
.icon-right>.icon-right-item>.hide-item2 .content>span{
color: #F07818;
}
active类已经在css设置了颜色，在网页编辑器中也看见设置完成但是显示的还是灰色
在navbar-nav中怎么把ul的下拉菜单做成多列并排的样式，是使用浮动吗？
在icon下拉菜单显示时，如何设置把鼠标移到隐藏元素上，隐藏元素依然能继续显示就跟前面的下拉菜单一样？
且icon下拉菜单的上方小三角是使用图标类进行设置出来的嘛？
正在回答
同学你好，因为点击导航显示子菜单的时候，添加了open类：
所以也需要在open类下面添加样式。
关于同学说的移到首页之外的导航项时，这些导航项就会消失到只留下导航项，这边没有测试出来效果：
同学可以具体描述一下是怎么测试出来说的那种效果，老师这边便于准确定位问题所在。
祝学习愉快！
你好，代码中的问题：
1、active的颜色默认是在a标签中设置的，所以在li上设置是没有改变的，可以修改为：
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
background-color: #F07818;
}2、下拉菜单中多列并排可以使用浮动，也可以使用row类，一列占据几个栅格。
3、可以使用js完成，在图标和子菜单中都添加移入mouseover移入事件。
4、小三角行可以自己写来，例如：
然后再用定位定到相关位置。
自己可以动手测试下，祝学习愉快！
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星