Question

我正在尝试使用css在具有不同属性的两个下拉菜单上盘旋时创建一个按钮。目前的问题是下拉菜单的属性在悬停时不会改变，看起来好像按钮扩展而不是只显示它下面的两个不同的菜单。（尝试实现类似于此处所示的演示：http://www.tutorialrepublic.com/codelab.php?topic=faq&file=show-hide-dropdown-on-mouse-hover）。这是代码：

#nav {
            margin: 0;
            text-align: left;
            color: #333;
        }
        #nav ul {
            padding-right: 3.5px;
            list-style-type: none;
            text-align: left;
            display: none;
            visibility: hidden;
        }
        #nav ul li{
            margin-left: 0;
            padding-left: 0;
            color: black;
            line-height: 21px;
            position: relative;
        }
        #nav:hover .myClassUl{
            visibility: visible;
            display: block;
        }
        .myClassUl {
            min-width: 50px;
            background: #f2f2f2;
            display: none;
            position: static;
            z-index: 999;
            left: 0;
        }

<button id="nav" class="selected arrow">Communications▼
    <ul class="myClassUl">
        <li id="emailButton" class="pointerCursor">Email</li>
        <li id="letterButton" class="pointerCursor">Letter</li>
    </ul>
</button>

请帮忙吗？

Answer 1

这个有效，稍微调整了你的css，在#nav:hover .myClassUl{之后移动了.myClassUl规则，并为下拉项添加了悬停规则

#nav {
            margin: 0;
            text-align: left;
            color: #333;
            position: relative;
        }
        #nav ul {
            padding: 0;
            margin: 2px;
            list-style-type: none;
            text-align: left;
            display: none;
        }
        #nav ul li{
            margin: 0;
            padding: 0;
            color: black;
            line-height: 21px;
            position: relative;
        }
        .myClassUl {
            min-width: 50px;
            background: #f2f2f2;
            display: none;
            position: absolute;
            z-index: 999;
            left: 0;
            top: 100%;
            width: 50px;
        }
        #nav:hover .myClassUl{
            display: block;
        }

        #letterButton:hover,
        #emailButton:hover {
            color: #F99;
        }

<button id="nav" class="selected arrow">Communications▼
<ul class="myClassUl">
    <li id="emailButton" class="pointerCursor">Email</li>
    <li id="letterButton" class="pointerCursor">Letter</li>
</ul>
</button>

Answer 2

你可以尝试这个：

#nav {
            margin: 0;
            text-align: left;
            color: #333;
        }
        #nav ul {
            padding-right: 3.5px;
            list-style-type: none;
            text-align: left;
            display: none;
            visibility: hidden;
        }
        #nav ul li{
            margin-left: 0;
            padding-left: 0;
            color: black;
            line-height: 21px;
            position: relative;
        }
        #nav:hover .myClassUl{
            visibility: visible;
            display: block;
        }
        .myClassUl {
            min-width: 50px;
            background: #f2f2f2;
            display: none;
            position: static;
            z-index: 999;
            left: 0;
        }

 .myClassUl #emailButton:hover
{
     background: red;
}
.myClassUl #letterButton:hover
{
     background: red;
}

FIDDLE EXAMPLE

悬停下拉菜单，其中包含来自父级的不同属性

2 个答案: