How to put li side by side in drop down menu?

Question

I'm trying to make it so that the drop down menu's are side by side, instead of a list.. but for me to make that happen I'd have to remove the position:absolute from #navigation > .nav-body > .menu > ul > li > .drop-ul and that still won't do because it messes up all the code.. How can I make it side by side? I'd try jQuery but not sure how to.

<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

I recently built a pure CSS drop-down menu for a website. It's similar to yours in structure. List items ( li ) are side by side. Code has passed validation with no errors or warnings.

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

DEMO: http://jsfiddle.net/x9upvtp0/