Question

如何在悬停时显示子菜单？我没有看到我所拥有的东西有什么问题 - （但显然出现了问题，因为它不起作用！）

HTML

<div>
  <ul>
    <li><a id="ALink" href="#">A</a></li>
      <ul id="SubMenu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    <li><a id="BLink" href="#">B</a></li>
    <li><a id="CLink" href="#">C</a></li>
  </ul>
</div>

CSS

#SubMenu {
display: none;
width: 200px;
height: 200px;
background: #00C;
}   

#ALink:hover #SubMenu {
  display: block;
    }

JSFiddle - 从代码到目前为止，当将鼠标悬停在选项“A”上时显示一个菜单。

Answer 1

你必须在该元素中有子菜单，它将与之链接：

<div>
  <ul>
    <li><a id="ALink" href="#">A
      <ul id="SubMenu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
     </a>
     </li>
    <li><a id="BLink" href="#">B</a></li>
    <li><a id="CLink" href="#">C</a></li>
  </ul>
</div>

Answer 2

以下代码应该有效。

HTML

<ul class="topmenu">
  <li class="submenu">A
    <ul>
    <li>Product 1</li>
    <li>Product 2</li>
    <li>Product 3</li>
    </ul>
  </li>
  <li>B</li>
  <li>C</li>
</ul>

CSS

以下代码是格式化和缩进。

ul.topmenu, ul.topmenu ul {
 display: block;
 margin: 0;
 padding: 0;
}

ul.topmenu li {
 display: inline;
 list-style: none;
 margin: 0;
 padding-right: 1.5em;
}

子菜单仍显示在页面上，因此您必须隐藏它：

ul.topmenu li ul {
  visibility: hidden; 
}

然后，当用户将鼠标悬停在封闭列表项上时，您只需要显示菜单：

ul.topmenu li.submenu:hover ul {
  visibility: visible;
}

将鼠标悬停在显示子菜单上

2 个答案: