Question

您好我已经创建了一个下拉菜单，但是当我将鼠标悬停在某个选项上时，子菜单中的项目会相互重叠。我试图玩填充，定位等但似乎没有任何作用。如果有人能提供帮助，我将不胜感激。感谢

enter image description here

HTML：

        <div class="menu-bg">
      <div class="menu_nav">
        <ul>
          <li class="active"><a href="#"><span>Home</span></a></li>
          <li><a href="" onclick="return false;">Books</a>
          <ul>
          <li><a href="#">Horror</a></li>
          <li><a href="#">Thriller</a></li>
          <li><a href="#">Non Fiction</a></li>
          <li><a href="#">Crime</a></li>
          <li><a href="#">Other</a></li>
          </ul>
          </li>
          <li><a href="#"><span>About us</span></a></li>
          <li><a href="#"><span>Blog</span></a></li>
          <li><a href="#"><span>Contact</span></a></li>
        </ul>
      </div>
</div>

CSS：

.menu-bg{
background:url(../images/menu.png) center top repeat-x;
padding:10px 0;
width:100%;
height:50px;
}

.menu_nav {
margin-top:-10px;
padding-right:30px;
margin-left: auto;
margin-right: auto;
width:960px;
z-index:20;
}

.menu_nav ul {
position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-left: 1px solid #494949;

}
.menu_nav ul li {
     border-right: 1px solid #494949;
  padding: 0;
  display: table-cell;
  float: left;
  height: 22px;
}
.menu_nav ul li a {
text-decoration:none;
 text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 22px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #7c7c7c;
  height: 22px;
  display: block;
  padding: 3px 60px 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.menu_nav ul li.active a, .menu_nav ul li a:hover {

    text-decoration:none;
    color:#EEE;
}

#active {
        text-decoration:none;
    color:#EEE;
}


    .menu_nav li ul {
    z-index:999;
        position: absolute;
        left: -999em;
        width: 160px;
        padding: 0;
    }
    .menu_nav li:hover ul {
        left: auto;
    }

    .menu_nav li li a {

        background: #060505;
        width: 120px;
        color: #FFFFFF;
        display: block;
    font-size:14px;
    text-align:left;
        margin: 0;
        padding: 9px 0 10px 25px;
        text-decoration: none;

    }
    .menu_nav li li a:hover {
        background: #99436E;
        color: #FFFFFF; 
        margin: 0;
        padding: 9px 0 10px 25px;
        text-decoration: none;
       border-bottom: 1px dotted #eee;
    }
    .menu_nav li ul ul {
        margin: -35px 0 0 145px;
    }
    .menu_nav li:hover ul ul {
        left: -999em;
    }
    .menu_nav li ul li:hover ul {
        left: auto;
    }

Answer 1

li的高度太小我调整到42px;把它变成你认为最好的东西。

.menu_nav ul li {
    border-right: 1px solid #494949;
    padding: 0;
    display: table-cell;
    float: left;
    height: 42px;
}

http://jsfiddle.net/pR5HT/

Answer 2

99％的时间，它修复了它：设置链接的样式，而不是列表。

在display:block - 代码上使用A并将所有样式放在A - 代码上，而不是LI。

在position上使用float:：，display:或LI。其他所有内容都在A-tag元素上。

CSS-下拉菜单重叠

2 个答案: