jquery - css/jquery - 悬停时添加下拉菜单

Question

我想知道当我的按钮悬停时如何制作一个简单的下拉菜单。

我的按钮:

   <ul class="menu-links right" style="margin-left:-25px">
        <li class="menu-black"><a href="javascript:void(0)" class="dropHover">?</a></li>
    </ul>

每当用户悬停“dropHover”时，我希望在下方悬停一个新的无序列表。这怎么可能？

谢谢。

Answer 1

您可以使用纯 CSS 制作一个简单的下拉菜单/子菜单。理论上，您可以通过添加 display:none 来隐藏下拉菜单/子菜单。或者用 left 将它推离屏幕很远位置像 left:-9999然后当您将鼠标悬停在菜单项上时，您会重置该位置或显示属性以显示您的菜单，如下所示:

这是一个基本的 CSS 菜单的构造。

CSS

.menu {
    width: 960px;
    background-color: Black;
    color: #fff;
    margin: 0 auto;
    height:auto;
    font-family: Segoe UI, Arial;
    font-weight:bold;
    min-height:15px;
}
.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav > li {
    float: left;
}

.nav li:hover a {
    background-color:#404040;
    color: #fff;
}

.nav a {
    background-color: Black;
    color: #fff;
    display: block;
    padding: 4px 12px;
    text-decoration: none;
    line-height:20px;
    font-size:12px;
    font-family: Segoe UI, Arial;
    white-space: pre;
}

.nav {
    zoom:1; /* ie hasLayout fix */
}

.nav li {
    position:relative;
}

.nav li ul {
    display:none;
    position:absolute;
    top:100%;
}

.nav li ul li:hover a {
    background-color:#777;
}

.nav li:hover ul {
    display:block;
}

/* Clearfix */

.nav:before, .nav:after {
    display:table;
    content:"";
}

.nav:after {
    clear:both;
}

然后您可以将下拉菜单/子菜单添加为父菜单项的子项。

HTML

<div class="menu">
    <ul class="nav">
        <li>
            <a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a>
            <ul>
                 <li><a href="#">SubItemOne looooooooooooooooooooooonger</a></li>
                <li><a href="#">SubItemOne</a></li>
                <li><a href="#">SubItemOne</a></li>
                <li><a href="#">SubItemOne looooooooooong</a></li>
            </ul>
        </li>
        <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
        <li>
            <a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a>
            <ul>
                 <li><a href="#">SubItemOne looooooooooooooooooooooonger</a></li>
                <li><a href="#">SubItemOne</a></li>
                <li><a href="#">SubItemOne</a></li>
                <li><a href="#">SubItemOne looooooooooong</a></li>
            </ul>
        </li>
        <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
        <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
    </ul>
</div>

Demo