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

Question

I try to make a navbar menu where the submenu is horizontal.

Code:

<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;
}

At this code the submenu goes vertical. I tried it with the id of the ul but it also didn´t worked ( float:left ). I also read in the other threads, but i couldn´t find an answer. Is there another way to make the submenu horizontal?

Answer 1

Solved the problem: add this to your css file or use <style></style> in your html file

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