javascript - 如何在下拉菜单中并排放置 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) 并排排列。代码已通过validation没有错误或警告。

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/