现在的效果是这样的：
想要变成:下拉菜单宽为整个屏幕宽，再下拉的比较窄，如下图：
原运行代码如下：
首页
首页
href="javascript:;">
首页
1111
11111111122222221333333314444444
2222
21111111222222222333333324444444
3333
31111111322222223333333334444444
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;
}
要怎么做呢？
