CSS菜单水平菜单丢失

时间:2014-06-18 16:17:58

标签: jquery html css jquery-ui asp.net-mvc-4

我正在使用ASP.Net MVC4,jquery 1.9,CSS 2.1开发应用程序 我的水平菜单有问题。 当我显示带有jquery组件的表单时,或者任何按钮丢失,因为菜单可以使它显示在前面,如图中所示: 正确的菜单: enter image description here

菜单横向问题: enter image description here

如何看到子菜单的第一个选项丢失(图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;
}

1 个答案:

答案 0 :(得分:1)

.menu > li {
  margin-left: 0px;
  z-index: 9999999
}

我正在添加999999,因为我想给出最大z-index值,你可以相应调整。另一个菜单的z-index明显高于菜单。