Question

我使用HTML和CSS创建了一个下拉菜单。

它工作正常但是子菜单显示，即使鼠标悬停在它们不可见时也会显示。我只想在主菜单项上悬停鼠标时显示子菜单。我使用的是opacity和z-index功能。我不想使用display: none隐藏子菜单，因为我想使用过渡效果。

＆＃13;

#nav > ul > li {
  position: relative;
  font-size: 40px;
  list-style: none;
  width: 160px;
  height: 50px;
  background-color: orange;
  padding: 4px;
}
#nav > ul > li > ul {
  position: absolute;
  font-size: 20px;
  list-style: none;
  padding: 10px;
  line-height: 40px;
  background-color: #ccc;
  top: 50px;
  opacity: 0;
  z-index: -999;
  transition: 0.5s ease-out;
}
#nav > ul > li:hover > ul {
  opacity: 1;
  z-index: 100;
  top: 60px;
}

＆＃13;

<div id="nav">
  <ul>
    <li><a href="#">Linpaws</a>
      <ul>
        <li><a href="#">Swapnil 1</a>
        </li>
        <li><a href="#">Swapnil 2</a>
        </li>
        <li><a href="#">Swapnil 3</a>
        </li>
      </ul>
    </li>

</div>

＆＃13;

请建议我应该做些什么来摆脱这个问题。

Answer 1

您可以使用show-range和visibility: hidden;隐藏子菜单。例如：

＆＃13;

opacity: 0;

＆＃13;

ul, li {
  padding: 0;
  margin: 0;
}

ul > li {
  display: inline-block;
  position: relative;
}
ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}
ul > li > a {
  display: block;
}
ul > li > ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  background: #eee;
  border: 1px solid #ddd;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease;
  margin-top: 5px;
}
ul > li > ul > li > a {
  display: block;
  text-align: left;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  padding: 5px 10px;
  transition: all .3s ease;
}
ul > li > ul > li > a:hover {
  color: #0072bc;
}

＆＃13;

Answer 2

关闭您的第一个<ul>代码，以使其发挥作用。

修改您的问题是，只要鼠标悬停在#nav > ul > li上，就会显示子菜单，但子菜单本身就是这个li的一部分。相反，您可以将:hover选择器绑定到主菜单a，然后将opacity:1应用于下一个兄弟，就像这样：

#nav > ul > li > a:hover + ul { opacity:1; z-index:100; top:60px; }

如果您还不知道，可能 read up about the adjacent sibling 。

请注意，将:hover选择器应用于超链接a将导致子菜单仅在鼠标位于实际文本上方时打开，而不一定是围绕它的橙色框。您可以通过将display:block应用于超链接a并将li特定属性移至li样式来解决此问题，如下所示：

#nav > ul > li { position:relative; list-style:none; } #nav > ul > li > a { display:block; font-size:40px; width:160px; height:50px; background-color:orange; padding:4px; }

Answer 3

如果我理解正确，你只想显示子菜单，当主菜单项悬停时......看起来很奇怪，但好吧......这是一种方法：

#nav > ul > li {
    position: relative;
    font-size: 40px;
    list-style: none;
    width: 160px;
    height: 50px;
    background-color: orange;
    padding: 4px;
}

#nav > ul > li:hover > ul { /* <<< moved from below */
    opacity: 1;             /* <<< moved from below */
    z-index: 100;           /* <<< moved from below */
    top: 60px;              /* <<< moved from below */
}                           /* <<< moved from below */

#nav > ul > li > ul, #nav > ul > li > ul:hover { /* <<< selector added */
    position: absolute;
    font-size: 20px;
    list-style: none;
    padding: 10px;
    line-height: 40px;
    background-color: #ccc;
    top: 50px;
    opacity: 0;
    z-index: -999;
    transition: 0.5s ease-out;
}

......是的...... Waflix说的话......关闭你的ul-tag：）

下拉菜单无法正常工作

3 个答案: