我正在使用ASP.Net MVC4,jquery 1.9,CSS 2.1开发应用程序 我的水平菜单有问题。 当我显示带有jquery组件的表单时,或者任何按钮丢失,因为菜单可以使它显示在前面,如图中所示: 正确的菜单:
菜单横向问题:
如何看到子菜单的第一个选项丢失(图2) 我怎么解决这个问题?
更新添加代码css
.menu, .menu ul {
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
line-height: 2em;
}
.menu a {
text-decoration: none;
}
.menu > li {
margin-left: 0px;
}
.menu > li:first {
margin-left:0px!important;
}
.menu > li > a {
background: #ffc850;
padding: 0px 10px;
margin: 0;
width: auto;
text-decoration: underline;
color: #3366CC;
}
.menu li a:hover {
color: #fff;
}
div.box {
position:absolute;
z-index: -2;
background-color: #ffc850;
left: 0;
top: 0;
border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
}
li.pull-down {
padding-right:0px;
}
li.pull-down > a {
background-image: url('/content/images/darrow.png');
background-position: 96% 75%;
background-repeat: no-repeat;
padding-right: 20px;
}
li.right-menu > a {
background-image: url('/content/images/rarrow.png');
background-position: 97% 45%;
background-repeat: no-repeat;
}
.menu a.selected {
background-color: #75CDD2;
border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
-webkit-border-radius: 0px 4px 4px 4px;
}
.menu li {
float: left;
position: relative;
}
.menu ul {
position: absolute;
display:none;
width: auto;
top: 2em;
background-color: #ffc850;
text-decoration: none;
color: #3366CC;
border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
-webkit-border-radius: 0px 4px 4px 4px;
}
.menu li ul a {
width: 180px;
height: auto;
float: left;
color: #fff;
padding: 7px 20px;
}
.menu li ul li {
padding: 0;
margin: 0;
}
.menu ul ul {
top: auto;
}
.menu li ul ul {
left: 200px;
}
.menu-item-selected > a {
background-color: #fff;
font-weight: bold;
-moz-opacity: .70;
filter: alpha(opacity=55);
opacity: .70;
}
.menu-item-selected > a:hover {
color: #3366CC !important;
}
答案 0 :(得分:1)
.menu > li {
margin-left: 0px;
z-index: 9999999
}
我正在添加999999,因为我想给出最大z-index值,你可以相应调整。另一个菜单的z-index明显高于菜单。