CSS/HTML: Not <br> for each <ul>

Question

Hi. So im having a little issue getting my menu with a slidedown function work together with my other existing menu (normal links).

My existing menu(with normal links) is like this, simple UL with LI links.

<ul class="menu">
      <li><a href="home.php">HOME</a></li>
      <li><a href="#">HOME</a></li>
      <li><a href="#">HOME</a></li>
      <li><a href="#">HOME</a></li>
      <li><a href="#">HOME</a></li>
</ul>

And my slidedown menu looks like this:

    <img src="images/button.png" width="126" height="23" class="menu_class">
<ul class="the_menu">
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
</ul>

I want the ul with the slidedown menu NEXT to the other ul with normal links..

Right now what it does, it <br> for each ul so the menubutton with the slidedown is under the menu, but i want it next to.

.menu_class {
    border:1px solid #1c1c1c;
}

.the_menu {
    position:absolute; 
    display:none;
    width:150px;
    border: 1px solid #1c1c1c;
}

.the_menu li {
    background-color: #283d44;
}

.the_menu li a {
font-size: 12px;
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.the_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #fffc30;
}

/* MENU 2*/

.menu li {
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}
.menu a {
    color: #94938e;
    display: block;
    float: left;
    margin: 0;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
}

Answer 1

Without seeing something, my first suggestion would be to float the ULs rather than positioning them absolutely.

At the same time, I'd suggest not having a different UL altogether for a menu option with a submenu. There are cleaner ways to do it with a single top-level UL and separate ULs for only the submenus. In these cases you nest the submenu ULs inside the LI elements for the main UL. Here's one resource, but there are many others. That link should give you enough to get started, though.

Josh

EDITED: More detail / example

Fundamentally, your UL structure will be as follows:

<div id="menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li>
            <a class="drop" href="/Products/Index">Products</a>
            <ul class="submenu">
                <li><a href="/Products/1">Meat cleavers</a></li>
                <li><a href="/Products/2">Hockey masks</a></li>
                <li><a href="/Products/3">Chainsaws</a></li>
            </ul>
        </li>
    </ul>
</div>

The magic happens in the CSS. I'm having to simplify it greatly, because my implementation includes special hover effects, styling for non-link group header LI items in the drop-menu, and color classes for the individual menu items. The basic idea is that you structure the UL to lay out the way you want it, then style the anchor tags to give the appearance you want.

Below is my exact CSS (which, by the way, borrows generously from Zendesk's menu structure). I removed the noise related to some of my special styling, but if I inadvertently took something out that breaks it let me know and I'll post the whole thing.

#menu { height: 30px; }

#menu ul { 
    list-style: none; 
    float: left;
    margin: 0; 
    padding: 0;
}

#menu ul a { 
    text-decoration: none;
    font-size: 12px; 
}

#menu ul li { 
    float: left; 
    position: relative; 
    padding: 8px 0; 
}
#menu li:hover { background: transparent url(/content/images/sprite.png) repeat-x 0px -128px; }
#menu a.drop { 
    padding: 8px 15px 7px 15px; 
    color: White;
}

#menu ul li img { 
    vertical-align: top; 
    padding-right: 5px; 
    border: 0; 
}

#menu li:hover > ul, #menu li.over ul { display: block; }

/* Drop-down menus */
ul.submenu li:hover > ul { display: block; }
ul.submenu li { width: 200px; left:0pt; height:auto;}
ul.submenu { 
    display: none;  
    left: -2px; 
    margin: 5px 0 0 0; 
    background:#FFFFFF none repeat scroll 0% !important;
    border-style:none solid solid;
    border-width:0pt 2px 2px;
    border-color: #4F81BD;
    padding:8px !important;
    position: absolute;
    text-align:left;
    top:30px;
    width: 200px;
    z-index:15000;
    min-height:28px;
    padding-left:8px;
    float:left;
}

ul.submenu li a {
color:#505050 !important;
border-top:1px solid #DDDDDD;
display:block;
float:none;
padding:3px 5px;
}

#menu li ul li {padding: 0; }

ul.submenu li a:hover {
background:#E6F3FC none repeat scroll 0% !important;
color:#000000;
}