Webpage Menus Not Quite Right

I'm having difficulty figuring out why my menus are on top of each other instead of side by side. See image: Can someone please explain what I need to do to have them appear side

Solution 1:

If you want them side-by-side, then you'll want to use eitherfloat or display:inline-block:

If you don't mind them stacking to the left, and dealing with how floats need to be handled, then this will work:

.dropdown > li {
    list-style: none;
    position: relative;
    text-align: center;
    font: bold 12px Tahoma; 
    width: 120px;
    float: left;
}

Notice the > direct descendant selector: .dropdown > li - this applies this style only to your top-level li elements. This will save you time and effort when it comes to styling your drop-downs.

If you want to allow them to variable width, or you don't want them stacked left:

.dropdown > li {
    list-style: none;
    position: relative;
    text-align: center;
    font: bold 12px Tahoma; 
    display: inline-block;
    /* IE7 hack to make inline-block work right */
    zoom: 1;
    *display: inline;
}