悬停时显示子菜单答案

【问题标题】：Show Submenu when hover悬停时显示子菜单
【发布时间】：2015-10-14 19:39:36
【问题描述】：

我是 jQuery 新手，我需要在光标悬停时显示子菜单。

这是我的代码：

<li class="menu">
    <a href="adresses.php">Qui sommes nous?</a>
    <ul class="submenu">
        <li><a href="history.php">Notre histoire</a></li>
        <li><a href="philosophie.php">Notre philosophie</a></li>
    </ul>
</li>

【问题讨论】：

你想用jquery还是css？请解释更多。
不，我是 jquery 新手，我想要一个提议，但现在没关系，我使用了 css

标签： hover submenu

【解决方案1】：

您可以使用 css 来做到这一点，使用 visbility 样式。

有例子：

ul
{
    position:relative; /*need for properly .submenu positioning */
    margin:0; padding:0;
}
li
{
    list-style-type:none; /*remove style type (circles) for all li*/
}
.menu
{
    display:inline-block;
}
/*submenu will be placed under parent li and hidden, until .menu is hovered*/
.submenu 
{
    visibility:hidden;
    position:absolute;
    top:100%;
}
/*on hover .menu, .submenu will be showed*/
.menu:hover > .submenu 
{
    visibility:visible;
}

<ul>
  <li class="menu">
    <a href="adresses.php">Qui sommes nous?</a>
    <ul class="submenu">
        <li><a href="history.php">Notre histoire</a></li>
        <li><a href="philosophie.php">Notre philosophie</a></li>
    </ul>
  </li>
  <li class="menu">
    <a href="adresses.php">Qui sommes nous?</a>
    <ul class="submenu">
        <li><a href="history.php">Notre histoire</a></li>
        <li><a href="philosophie.php">Notre philosophie</a></li>
    </ul>
  </li>
<ul>

【讨论】：

【解决方案2】：

这可以使用纯 CSS 来完成。试试这个：

.submenu {
    height: 0;
    width: auto;
    background: url(../../../themes/images/...png) repeat;
    position: relative;
    top: 15px;
    line-height: 11px;
}
.submenu li {
    height: 12px;
    font-size: 12px;
    color: #FFF;
    padding: 15px;
    padding-right: 5px;
    font-family: Arial, Helvetica, sans-serif;
    display: none;
    cursor: pointer;
}
.submenu li:hover {
    color: #FFF;
    background: #A526CA;
}

【讨论】：