1

嗨，我创建了一个下拉菜单，但是当我将鼠标悬停在一个选项上时，子菜单中的项目只是相互重叠。我尝试过使用填充、定位等，但似乎没有任何效果。如果有人可以提供帮助，我将不胜感激。谢谢

在此处输入图像描述

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;
    }
4

2 回答 2

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/

于 2013-09-18T19:42:35.943 回答
0

99% 的时间，这解决了它：样式链接，而不是列表。

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

使用position:，float:或display:在LI. 其他一切都在 A-tag 元素上进行。

于 2013-09-18T19:36:27.203 回答