Question

我尝试制作一个子菜单水平的导航栏菜单。

代码：

<nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Am Dakana</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Page 1-1</a></li>
                        <li><a href="#">Page 1-2</a></li>
                        <li><a href="#">Page 1-3</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 2</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Page 2-1</a></li>
                        <li><a href="#">Page 2-2</a></li>
                        <li><a href="#">Page 2-3</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 3</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Page 3-1</a></li>
                        <li><a href="#">Page 3-2</a></li>
                        <li><a href="#">Page 3-3</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>
        </div>
    </nav>

CSS：

.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left:100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}
.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

在此代码中，子菜单是垂直的。我用ul的id尝试了它，但它也没有用（float:left）。我也读过其他帖子，但我找不到答案。还有另一种方法可以使子菜单水平吗？

Answer 1

解决了问题：将此添加到您的css文件或使用html文件中的<style></style>

ul li {
    display: block;
    float: left;
}
li:hover ul {
    display: block; 
    position: absolute;
    left:0px;
} 
li:hover li {
    float: left;
    font-size: 11px;
}

如何将下拉菜单中的子菜单从垂直更改为水平

1 个答案: