Question

我一直在研究有关如何使下拉菜单正常工作的多个stackoverflow问题，但到目前为止，这些问题都没有解决。我有一个导航列表，其中包含几个链接，并且希望其中一个具有悬停选项，该选项会下拉出更具体的选项列表。

这是列表的HTML：

    <div id="leftMenu" ng-if="loggedin">
            <li><a href="{{user.oikeudet[100]}}" ng-if="user.oikeudet[100]">Koti</a></li>
            <li><a href="{{user.oikeudet[1000]}}" ng-if="user.oikeudet[1000]">Jäsentiedot</a></li>
            <li>
                    <div class="dropdown">
                            <a href="{{user.oikeudet[10002]}}" ng-if="user.oikeudet[10002]">Asukastiedot</a>
                            <ul class="dropdown-content" role="menu">
                                    <li><a href="#">Kaste</a></li>
                            </ul>
                    </div>
            </li>
            <li><a href="{{user.oikeudet[1001]}}" ng-if="user.oikeudet[1001]">Raportointi</a></li>
            <li><a href="{{user.oikeudet[10001]}}" ng-if="user.oikeudet[10001]">Toiminnot</a></li>
            <li><a href="{{user.oikeudet[10000]}}" ng-if="user.oikeudet[10000]">Admin</a></li>
    </div>

这是我的CSS：

.dropdown {
    width: auto;
    display: inline-block;
    position: relative;
    padding: 0px;
    margin: -1px;
}
.dropdown-content {
    position: absolute;
    width:auto;
    z-index:1000;
    display: block;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block; margin-top: 0;}

预先感谢您对这个问题的帮助！

Answer 1

        .sub {
            display: none;
        }

        .main > li:hover .sub {
            display: block;
        }

    <ul class="main">
        <li>a
            <ul class="sub">
                <li>a1</li>
                <li>a2</li>
                <li>a3</li>
            </ul>
        </li>
        <li>b
            <ul class="sub">
                <li>b1</li>
                <li>b2</li>
                <li>b3</li>
            </ul>
        </li>
        <li >c
            <ul class="sub">
                <li>c1</li>
                <li>c2</li>
                <li>c3</li>
            </ul>
        </li>
    </ul>

下拉菜单未显示

1 个答案: