Question

我是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>

Answer 1

您可以使用visbility样式使用css执行此操作。

有例子：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 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;
}

悬停时显示子菜单

2 个答案: