Question

I have a nav bar with a drop down that is working beautifully. The only thing I am trying to change, is when you hover over the main links, the sub-links/text are on top of eachother. I want them to display horizontally. I have tried all sorts of floats and display inline etc…

Here is a portion of the HTML:

<ul id="top_main_nav" style="float:left;">
                    <li><a href="Profile.php?id=<?php echo $auth->id; ?>">Me</a>
                        <ul>
                        <li><a href="Profile.php?id=<?php echo $auth->id; ?>"><?php echo ($auth->first_name); ?> <?php if(strlen($auth->last_name) > 6) { echo substr(strtoupper($auth->last_name),0,6) . "..."; }else{ echo ($auth->last_name); } ?></a></li>
                        <li><a href="EditProfile.php">Edit My Profile</a></li>
                        <li><a href="MySettings.php">Settings</a></li>
                        <li><a href="EmailSettings.php">Email Settings</a></li>

                        </ul>
                    </li>
</ul>

Here is the css:

#user_nav_future { 
    margin: 0 auto; 
    font: bold 12px Arial,Helvetica, sans-serif; 
    color: #fff; 
}

#user_nav_future ul li { 
    list-style: none; 
    float: left;
}

#user_nav_future ul li a {
    color: #fff; 
    padding: 10px; 
    display: block; 
    text-decoration: none;
}

#user_nav_future li ul {
    display: none;
    position: absolute; 
    top: 35px; 
    right: 160px; 
    z-index: 1001; 
    margin: 0; 
    padding: 0;
}

#user_nav_future li ul a { 
    color: #666; 
    display: inline; 
    float: left;
}

#user_nav_future ul li a:hover { 
    color: #FF4800;
}

#user_nav_future ul { 
    padding:0; 
    margin:0; 
    list-style:none;
}

#user_nav_future li { 
    float:left; 
    position:relative; 
    text-align:center;
}

#user_nav_future li ul { 
    display:none; 
    position:absolute; 
    top:34px; 
    left:0;
}

#user_nav_future li ul li { 
    width:160px;
}

#user_nav_future li:hover ul,#user_nav li.over ul { 
    display:block;
}

Answer 1

These changes should do the trick:

#user_nav_future { 
    margin: 0 auto; 
    font: bold 12px Arial,Helvetica, sans-serif; 
    color: #fff; 
}

#user_nav_future ul {
    /* Reset padding / margins on <ul>.  Add back in as necessary. */
    padding: 0;
    margin: 0;
    list-style: none; 
}

#user_nav_future ul li {
    /* Take <li> out of the picture - everything is now being dictated by nested <a> */   
    padding: 0;
    margin: 0;     
    display: inline;
}

#user_nav_future ul li a {
    /* whatever width you want each link to be.  Since you've got 10px of left/right padding, true element width will be 180px */
    width: 160px; 
    padding: 10px;  
    float: left;

    position: relative; 
    text-decoration: none;
    text-align: center;

    color: #fff; 
}

#user_nav_future li ul a { 
    color: #666; 
}

#user_nav_future ul li a:hover { 
    color: #FF4800;
}

#user_nav_future li ul { 
    display: none; 
    position: absolute; 
    top: 34px; 
    left: 0;
}

#user_nav_future li:hover ul,#user_nav li.over ul { 
    display: block;
}

What they’re doing is setting all the block elements that are causing your drop downs to go down to inline elements that float so the menu is horizontal.

I’ve also transferred positioning control over to the <a> elements. That way the entire area of the link will be clickable, rather than just the text.

If the above doesn’t work for you, post some of your HTML or a dev link so we can see what’s going on.