Question

我为垂直下拉导航菜单编写了CSS代码，其子菜单分支到下拉菜单项的右侧，例如下面的html中显示的“Item 3 sub 1.1”和“Item 3 sub 2.1”。

主下拉菜单工作正常，但是当我用鼠标光标悬停在子菜单上时，子菜单项闪烁（上下抖动）和其他项消失。例如，当我用光标悬停在后者上时，第2项第2项堆叠并消失在第2项第1项后面。

我能做些什么来阻止这种生涩的闪烁效果？...感谢您的帮助

这是菜单的CSS

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    float:left;
    display:inline;
}
ul li {
    display:block;
    position: relative;
    float: left;
    left: 85px;
}
li ul {
    display: none;
    margin:0;
}
ul li a {
    display: block;
    background: #660000;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    border-left:1px solid #660000;
    border-right:1px solid #660000;
}
ul li a:hover {
    background: #330066;
    display: block;
}
li:hover ul {
    position: fixed;
    display: block;
}
li:hover li {
    float: none;
}
li:hover a {
    background: #330066;
}
li:hover li a:hover {
    background: #660000;
}
.drop-nav li ul li {
    border-top: 0px;
    z-index: 200;
    border-bottom:0;
    right:0;
    left:0;
}
li li:hover a {
    position:relative;
    display: block;
}
li li ul a {
    border-left:1px solid #660000;
    margin-top:-25px;
    margin-bottom: 25px;
    margin-left: 85px;
    display: none;
}
li:hover li:hover ul li a:hover {
    background: #660000;
    margin-top:-25px;
    margin-bottom:25px;
    margin-left: 85px;
    overflow: none;
    display: none;
}
.nav {
    padding: 0px;
    text-align: center;
    border: 0px;
    vertical-align: middle;
    display: table-row;
    width: 100%;
    margin: 0px auto;
    background-color:#660000;
    overflow: hidden;
    position:relative;
    height: 30;
    text-align: center;
    margin: 0px auto 0px auto;
}

这是html

<div class="nav" >
<ul class="drop-nav">
<li><a href="item1.html">Item 1</a></li>
<li><a href="#">Item 2</a>
  <ul>
    <li><a href="item2_1.html">Item 2 sub 1</a></li>
    <li><a href=" item2_2.html"> Item 2 sub 2</a></li>
    <li ><a href=" item2_3.html"> Item 2 sub 2</a></li>
  </ul>
</li>
<li><a href="#"> Item 3</a>
  <ul>
    <li><a href="#"> Item 3 sub 1 &raquo;</a>
      <ul>
        <li><a href=" item3_1_1.html"> Item 3 sub 1.1</a></li>
        <li><a href=" item3_1_2.html"> Item 3 sub 1.2</a></li>
        <li ><a href=" item3_1_3.html"> Item 3 sub 1.3</a></li>
      </ul>
    </li>
    <li><a href="#"> Item 3 sub 2 &raquo;</a>
      <ul>
        <li><a href=" item3_2_1.html"> Item 3 sub 2.1 </a></li>
        <li><a href=" item3_2_2.html"> Item 3 sub 2.2 </a></li>
        <li><a href=" item3_2_3.html"> Item 3 sub 2.3 </a></li>
      </ul>
    </li>
    <li><a href=" item3_3.html"> Item 3 sub 3 </a></li>
    <li><a href=" item3_4.html"> Item 3 sub 4 </a></li>
    <li><a href=" item3_5.html"> Item 3 sub 5 </a></li>
  </ul>
</li>
<li><a href=" item4.html">Item 4</a></li>
<li><a href="#">Item 5</a>
  <ul>
    <li><a href=" item5_1.html"> Item 5 sub 1 </a></li>
    <li><a href=" item5_2.html"> Item 5 sub 2 </a></li>
  </ul>
</div>

有些菜单项在悬停时会闪烁，其他菜单会闪烁

0 个答案: