Question

（到目前为止）我已经对其进行了些微调整，但是随后的每个下拉菜单都出现了小幅下降。

这里是CSS的原样：

    .menu-area {
    background: #d61a5e
}

.mainmenu ul li {
    position: relative;
}

.mainmenu .dropdown-menu {
    margin: 0;
    border-radius: 0;
}

.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a, .navbar-expand-lg .navbar-nav .nav-link {
    color: #aaa;
    font-size: 16px;
    text-transform: capitalize;
    padding: 16px 15px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block !important;
}


.mainmenu .active {
    color: #fff;
    background: #222;
}


/******************************Drop-down menu work on hover**********************************/
.mainmenu {
    background: none;
    border: 0 solid;
    margin: 0;
    padding: 0;
    min-height: 15px;
    width: 100%;
}

@media only screen and (min-width: 767px) {
    .mainmenu .collapse ul li:hover > ul {
        display: block;
    }

    .mainmenu .collapse ul ul {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px;
        display: none;
    }
    /*******/
    .mainmenu .collapse ul ul li {
        position: relative
    }

    .mainmenu .collapse ul ul li:hover > ul {
        display: block
    }

    .mainmenu .collapse ul ul ul {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 250px;
        display: none
    }
    /*******/
    .mainmenu .collapse ul ul ul li {
        position: relative
    }

    .mainmenu .collapse ul ul ul li:hover ul {
        display: block
    }

    .mainmenu .collapse ul ul ul ul {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 250px;
        display: none;
        z-index: 1
    }
}

@media only screen and (max-width: 767px) {
    .navbar-nav .show .dropdown-menu .dropdown-menu > li > a {
        padding: 16px 15px 16px 35px
    }

    .navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a {
        padding: 16px 15px 16px 45px
    }
}

我一直不确定为什么每个级别都比上一个级别低一些。我认为这与css的悬停部分有关，但我不知道如何进行调整以强制其升级。

我希望有人可能会解决此问题。

编辑这是页面的HTML。

关于Aurelia的事情是它试图摆脱javascript的方式，这可能会对那些熟悉JS的人有所帮助。

    <template>
    <require from="./navmenu.scss"></require>
    <require from="./activeRoute"></require>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mainmenu mr-auto">
        <a class="navbar-brand" href="#/home">JobsLedger</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li repeat.for="route of router.navigation">
                    <a href.bind="route.href" if.bind="!route.settings.nav" class=" ${route.href == topUrl ? 'active' : ''}">
                        ${route.title}
                    </a>
                    <a href.bind="route.href" if.bind="route.settings.nav" class="dropdown-toggle ${route.href == topUrl ? 'active' : ''}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        ${route.title}
                    </a>

                    <ul if.bind="route.settings.nav" class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li repeat.for="menu of route.settings.nav">
                            <a href.bind="menu.href" if.bind="!menu.settings.nav" class="dropdown-menu-link">
                                ${menu.title}
                            </a>
                            <a href.bind="menu.href" if.bind="menu.settings.nav" class="dropdown-toggle dropdown-menu-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                ${menu.title} <span class="caret-right"></span>
                            </a>

                            <ul if.bind="menu.settings.nav" class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li repeat.for="subMenu of menu.settings.nav">
                                    <a href.bind="subMenu.href" if.bind="!subMenu.settings.nav" class="dropdown-menu-link">
                                        ${subMenu.title}
                                    </a>
                                    <a href.bind="subMenu.href" if.bind="subMenu.settings.nav" class="dropdown-toggle dropdown-subMenu-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        ${subMenu.title} <span class="caret-right"></span>
                                    </a>

                                    <ul if.bind="subMenu.settings.nav" class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <li repeat.for="lowestSubMenu of subMenu.settings.nav">
                                            <a href.bind="lowestSubMenu.href" if.bind="!lowestSubMenu.settings.divider" class="dropdown-menu-link">
                                                ${lowestSubMenu.title}
                                            </a>
                                        </li>
                                    </ul>

                                </li>

                            </ul>

                        </li>

                    </ul>

                </li>

            </ul>


            <ul class="nav navbar-nav navbar-right mr-auto">
                <li repeat.for="route of router.navigation" if.bind="route.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
                    <a href.bind="route.href" if.bind="!row.settings.nav">${ row.title }</a>

                    <a href.bind="route.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
                         if.bind="route.settings.nav">
                        ${row.title}
                        <span class="caret"></span>
                    </a>

                    <ul if.bind="route.settings.nav" class="dropdown-menu">
                        <li repeat.for="menu of row.settings.nav">
                            <a href.bind="menu.href">${menu.title}</a>
                        </li>
                    </ul>
                </li>
                <li><a>Welcome ${userName}</a></li>
                <li><a href="#" click.delegate="logout()">Log Out</a></li>
            </ul>
        </div>
    </nav>
</template>

Bootstrap 4的多级下拉菜单未对齐

0 个答案: