Question

hellow，我制作了一个二级菜单，当用户将鼠标悬停在特定的一个主菜单项上时，我喜欢它显示....

我试过这段代码，但它没有用......

＆＃13;

.second-menu {display:none}
ul li #2:hover + .second-menu {display:block}

＆＃13;

<ul>
  <li id="1">first</li>
  <li id="2">second</li>
  <li id="3">third</li>
<ul>
  
  <div class="second-menu">
    <ul>
      <li>page1</li>
      <li>page2</li>
      <li>page3</li>
    </ul>
  </div>

＆＃13;

有什么建议吗？.... 只能通过css或javascript ....

提前谢谢!!!

Answer 1

＆＃13;

.second-menu{
  display:none;
}
li:hover >.second-menu{
  display:block;
}

＆＃13;

<ul>
  <li id="1">first</li>
  <li id="2">second  
 
    <ul class="second-menu">
      <li>page1</li>
      <li>page2</li>
      <li>page3</li>
    </ul>
    </li>
  <li id="3">third</li>
  <ul>

＆＃13;

Answer 2

如果您想使用CSS，则必须将子菜单放在要悬停的元素中。

对于CSS，C.Raf.T的答案是完美的。

如果由于某种原因你想使用javascript，你可以做这样的事情

document.getElementById('2').addEventListener('mouseenter', function ()
{
  document.getElementById('subMenu').style.display = "block";
});
document.getElementById('2').addEventListener('mouseleave', function ()
{
  document.getElementById('subMenu').style.display = "none";
});

注意：上面的代码要求你添加一个＆＃34; subMenu＆＃34; id到包含菜单的div。如果您希望仅显示一个悬停事件的serval菜单，请改用类。

但老实说，如果您需要的是嵌套子菜单，那么CSS答案是最好的方法。如果子菜单必须在父级之外，则需要javascript。

Answer 3

通过使用纯CSS，您必须确保子菜单（.second-menu）是您悬停的HTML元素的子节点。因为很遗憾，CSS并不知道父选择器。

通过使用JS，您更灵活。意味着将子菜单放在任何地方。

＆＃13;

* { margin: 0; padding: 0; }
.second-menu {display:none; border: 1px solid blue; width: 100%; position: absolute; left: 0; right: 0; }
ul li#two:hover > .second-menu {display:block}
.relative { position: relative; border: 1px solid black; }
li { display: inline-block; }

＆＃13;

<ul class="relative">
  <li id="one">first</li>
  <li id="two">second
    <ul class="second-menu">
      <li>page1</li>
      <li>page2</li>
      <li>page3</li>
    </ul>
  </li>
  <li id="three">third</li>
<ul>

＆＃13;

Answer 4

使用Javascript答案，

document.getElementById('hover').onmouseover = function(){
    document.getElementById('second-menu').style.display = 'block';
}

document.getElementById('hover').onmouseout = function(){
    document.getElementById('second-menu').style.display = 'none';
}

.second-menu{
  display:none;
}

<ul id="hover">
  <li id="1">first</li>
  <li id="2">second</li>
  <li id="3">third</li>
<ul>
  
  <div class="second-menu" id="second-menu">
    <ul>
      <li>page1</li>
      <li>page2</li>
      <li>page3</li>
    </ul>
  </div>

Here is a fiddle

如何在特定元素上悬停/进出时显示/隐藏

4 个答案: