Question

我添加了this插件，让我的Bootstrap Nav成为子菜单。我的问题是如何将子菜单与其父菜单对齐。我需要把它向下移动一点。

我创建了一个这样的CSS：

#header-menu-nav .dropdown-menu li ul { margin-top: -27px !important; }

它工作正常。我的问题在于响应部分。它也受到影响。

这是我的简单HTML代码：

<ul class="nav navbar-nav" id="header-menu-nav">
    <li>
        <a href="#">New</a>
        <ul class="dropdown-menu">
            <li><a href="#">TEST</a></li>
            <li><a href="#">TEST</a></li>
            <li><a href="#">TEST</a></li>
            <li><a href="#">TEST</a></li>
            <li><a href="#">TEST</a></li>
        </ul>
    </li>
    <li><a href="#">Furniture</a></li>
    <li><a href="#">Lighting</a></li>
    <li><a href="#">Kitchen</a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">One more link</a></li>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
                </ul>
            </li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">A long sub menu</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li><a href="#">One more link</a></li>
                            <li><a href="#">Menu item 1</a></li>
                            <li><a href="#">Menu item 2</a></li>
                            <li><a href="#">Menu item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Another link</a></li>
                    <li><a href="#">One more link</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Bath</a></li>
    <li><a href="#">Interior Goods</a></li>
    <li><a href="#">Gifts</a></li>
    <li><a href="#">Outlet</a></li>
</ul>

你能帮我吗？这样做有没有正确的方法？我在CSS中的表现还不够好。

Answer 1

试试这个。

    #header-menu-nav .dropdown-menu li{
     position: relative;
    }
    #header-menu-nav .dropdown-menu li ul{
    position: absolute;
    top:0;
    left: 100%;
    }

并删除margin-top：-27px;

如何将Bootstrap 3 Nav子菜单与其父

1 个答案: