悬停显示子菜单答案

【问题标题】：Hover to Show Sub-Menu悬停显示子菜单
【发布时间】：2014-01-22 05:06:20
【问题描述】：

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

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”上时显示一个菜单。

【问题讨论】：

标签： hover submenu

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：