如何在下拉菜單中並排放置 li？

Question

我試圖讓這個下拉菜單中的是並排的，而不是一個名單..但對我來說，做到這一點我不得不刪除position:absolute從#navigation > .nav-body > .menu > ul > li > .drop-ul仍然不行，因為它弄亂了所有代碼..我怎樣才能並排？ 我會嘗試 jQuery 但不知道如何。

<section id="navigation">
<div class="nav-body">  
    <section class="menu">
        <ul>
            <li>
                <a href="/"><span class="icon"></span>home</a>
            </li>
            <li>
                <a href="/"><span class="icon"></span>second</a>
                <ul class="drop-ul">
                    <a href="/guide-keto-diet">
                        <li>
                            sub 1
                        </li>
                    </a>
                    <a href="/">
                        <li>
                            sub 2
                        </li>
                    </a>
                    <a href="/">
                        <li>
                            sub 3
                        </li>
                    </a>
                    <a href="/">
                        <li>
                            sub 4
                        </li>
                    </a>
                    <a href="/">
                        <li>
                            sub 5
                        </li>
                    </a>
                </ul>
            </li>
            <li><a href="/"><span class="icon"></span>cat 1</a></li>
        </ul>
    </section>
</div>

Answer 1

我最近為一個網站構建了一個純 CSS 下拉菜單。 它的結構與你的相似。 列表項 ( li ) 並排排列。 代碼已通過驗證，沒有錯誤或警告。

HTML

<nav id="main-nav">
<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
        <ul class="main-nav-sub">
        <li><a href="#">Menu 2.1</a></li>
        <li><a href="#">Menu 2.2</a></li>
        <li><a href="#">Menu 2.3</a></li>
        <li><a href="#">Menu 2.4</a></li>
        <li><a href="#">Menu 2.5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul class="main-nav-sub">
        <li><a href="#">Menu 3.1</a></li>
        <li><a href="#">Menu 3.2</a></li>
        <li><a href="#">Menu 3.3</a></li>
        </ul>
    </li>   
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a>
        <ul class="main-nav-sub">
        <li><a href="#">Menu 5.1</a></li>
        <li><a href="#">Menu 5.2</a></li>
        <li><a href="#">Menu 5.3</a></li>
        <li><a href="#">Menu 5.4</a></li>
        </ul>
    </li>
</ul>
</nav>

CSS

#main-nav > ul {
    list-style-type: none;
    padding: 0;
    border: 1px solid #999;
    position: absolute;
}

#main-nav > ul  > li {
    float: left;
    background-color: #000;
}

.main-nav-sub {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#main-nav > ul  > li+li {
    border-left: 1px solid #999;
}

.main-nav-sub > li  {
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
    background-color: #000;
}

.main-nav-sub > li:first-child {
    border-top: 1px solid #999;
}

#main-nav > ul > li > a,
.main-nav-sub > li > a {
    text-decoration: none;
    white-space: nowrap;
    display: block;
    color: #fff;
    font-family: verdana, sans-serif;
    font-size: .8em;
    font-weight: bold;
    padding: 10px 20px;
}

#main-nav > ul > li:hover > a {
    color: #000;
    background-color: #fff;
}

.main-nav-sub > li:hover > a {
    color: #000;
    background-color: #fff;
}

.main-nav-sub {
    position: absolute;
    z-index: -999;
    opacity: 0;
        filter: alpha(opacity=0); /* IE older versions */
        zoom: 1;  /* IE older versions */
}

#main-nav > ul > li:hover > .main-nav-sub {
    z-index: 100;
    opacity: 1;
        filter: alpha(opacity=100); /* IE older versions */
        zoom: 1;  /* IE older versions */

    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in;
}

演示： http : //jsfiddle.net/x9upvtp0/