css - 下拉菜单如何居中并全屏宽显示
本文介绍了css - 下拉菜单如何居中并全屏宽显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
现在的效果是这样的：
想要变成:下拉菜单宽为整个屏幕宽，再下拉的比较窄，如下图：
原运行代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/dashboard.css" type="text/css" media="screen" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="menu_nav">
<div class="container">
<p class="navbar-text navbar-left"><b>首页</b> </p>
<div class="dropdown" id="mobile_menu">
<a id="dLabel" role="button" data-toggle="dropdown" class="navbar-right btn btn-default btn-lg" data-target="#"
href="javascript:;">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
<div class="menu_s">
<ul class="dropdown-menu menu-top">
<li><a href="#">首页</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="#">1111</a>
<ul class="dropdown-menu">
<li><a href="#">11111111</a></li>
<li><a href="#">12222222</a></li>
<li><a href="#">13333333</a></li>
<li><a href="#">14444444</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">2222</a>
<ul class="dropdown-menu">
<li><a href="#">21111111</a></li>
<li><a href="#">22222222</a></li>
<li><a href="#">23333333</a></li>
<li><a href="#">24444444</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">3333</a>
<ul class="dropdown-menu">
<li><a href="#">31111111</a></li>
<li><a href="#">32222222</a></li>
<li><a href="#">33333333</a></li>
<li><a href="#">34444444</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
css文件如下：
.dropdown:hover .menu-top {
display: block;
text-align: center;
}
.dropdown-menu {
text-align: center;
}
.dropdown-submenu{
position:relative;
}
.dropdown-submenu > .dropdown-menu{
top:0;
margin-top:2rem;
margin-left:6rem;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
width: 80%;
}
.dropdown-submenu:hover > .dropdown-menu{
display:block;
}
.menu-top {
width: 100%;
margin-top: 4rem;
}
.dropdown-submenu > a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover > a:after{
border-left-color:#ffffff;
}
.dropdown-submenu .pull-left{
float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
要怎么做呢？
解决方案
能怎么做，你用的人家的框架，既然有不满意的地方就只能自己改吧，你可以给下拉框给个ID值，单独给样式，你也可以给内联样式。总之就是用自己的样式去覆盖他的样式
这篇关于css - 下拉菜单如何居中并全屏宽显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
