Question

我有一个菜单，我在这里添加了最小化的代码。当用户将鼠标悬停在与其关联的<a>标记上时，我希望显示子菜单。问题是= ＆GT;当我将鼠标悬停在<a>标记上时，它会显示子菜单，但当我尝试选择子菜单项时，它会消失。我该如何修复此问题？

＆＃13;

.nav-sec-level{
  opacity:0;
  border:1px solid #000;
  }

a:hover + ul.nav-sec-level{
  opacity:1;
  }

＆＃13;

<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

＆＃13;

注意：我只能为<a>标记应用悬停属性。

Answer 1

＆＃13;

.nav-sec-level{
  background: red;
  border:1px solid #000;
  display: none;
 }

.side-bar:hover .nav-sec-level{
   display: block;
}

＆＃13;

<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

＆＃13;

Answer 2

试试这段代码，这通常是子菜单的工作原理

li.side-bar{
  position:relative;
  transition: all .5s;
}

.nav-sec-level{
  border:1px solid #000;
  position:absolute;
  top:100%;
  display:none;
  background:#fff;
  z-index:111;
  
  }

li.side-bar:hover > ul.nav-sec-level{
  display:block;
  }

<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

Answer 3

.nav-sec-level{
  display:none;
  border:1px solid #000;
  }
a:hover + ul.nav-sec-level{
  display:block;
}

<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

我希望它能正常运作。

Answer 4

所以，这种情况正在发生，因为当您尝试转到子菜单时，您正在从“a”元素中删除光标。快速修复它只是改变你的：悬停到“li”元素并替换opacity属性来显示。

类似的东西：

.nav-sec-level{
  display:none;
  border:1px solid #000;
  }

li:hover ul.nav-sec-level{
  display: block;
  }

<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

Answer 5

而:hover上a代替li使用.nav-sec-level，这样你的子菜单（li）也会成为.nav-sec-level{ display: none; border:1px solid #000; } li:hover ul.nav-sec-level{ display: block; }的一部分，所以它会悬停时保持开放状态。

＆＃13;

<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

＆＃13;

@javax.ws.rs.Consumes(javax.ws.rs.core.MediaType.APPLICATION_JSON)

＆＃13;

Answer 6

请使用以下风格而不是您的风格：

.nav-sec-level
{   
   border:1px solid #000;
   display:none;
   position:absolute;
   background-color:#CCCCCC;
 }

.side-bar:hover ul.nav-sec-level
{
  display:block;    
}

HTML代码无变化。

...谢谢

如何在悬停时保持css样式

6 个答案: