Javascript 如何在下拉菜单中将li并排放置？

我试图使下拉菜单并排出现，而不是列表。。但要实现这一点，我必须从

#navigation>.nav body>.menu>ul>li>中删除
位置：absolute
。删除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>

---

我最近为一个网站创建了一个纯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>

---

演示：

在旁注中，只有

li

是。所以你的

a

标签应该在你的

li

中，并且可以选择样式，这样它们就可以填充

li

中的所有空间。可能是重复的感谢，我整个下午都在搜索它，什么都没有。我希望这个答案是有用的。让我知道这是否是你想要的，否则我可以修改我的答案。不，那太完美了。谢谢。我真的想知道如何才能使下拉列表只在我悬停在li上时显示，而不是隐藏的下拉列表上？不管怎样，我只是使用了display:none和block，而不是不透明。这样，下拉列表只在你悬停在第一个列表上时显示。问题解决了，我现在唯一的问题是，在我将下拉菜单悬停后，它没有居中。。有什么想法吗？您想让我把代码放到JSFIDLE中吗？

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