how to make my <ul> hover start on the same exact spot?

Question

Hello. I have a 1024px nav bar that has five categories that are links (ul's) A few of them have drop downs. I have them set up perfectly to align horizontally. The one to the far left when hovered, drops down the text perfectly to left edge underneath the nav bar, as intended. As you move down to the right, the text(the hovered text) only goes as far left as the parent link . I am trying to get them to ALL go to the left edge when hovered over no matter where there place is in the nav bar.

HERE is an example of a site that has a header that is a perfect example of what I am trying to do

Here is my html:

<div id="nav_1024_main" class="clearfix">
 <div class="container clearfix">
   <div id="user_nav_future" class="clearfix">

   <?php 
   // if signed in
   if($auth) { ?>
    <ul style="float:right;">
     <li><a href="index_signedIn.php">Home</a></li> 
     <li><a href="#" class="toggle_dash">Goodbye</a></li>
    </ul>
    <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>
                     <li><a href="Inbox.php">Messages<?php if($auth->get_new_messages() > 0) { echo ' (' . $auth->get_new_messages() . ')'; } ?></a>
                  <ul>
                     <li><a href="Inbox.php">Inbox</a></li>
                  <li><a href="SentMail.php">Sent</a></li>
                     </ul>
                 </li>
                    <li><a href="Airwave.php">Airwave</a>
                 <li><a href="Blogs.php">Blogs</a>
                  <ul>
                     <li><a href="ComposeBlog.php">Write A Blog</a></li>
                      <li><a href="UserBlogArchives.php?id=<?php echo $auth->id; ?>">My Blogs</a></li>
                     <li><a href="Blogs.php">View All Blogs</a></li>
                     </ul>
                 </li>
                 <li><a href="Questions.php">Questions</a>
                  <ul>
                     <li><a href="AskQuestion.php">Ask A Question</a></li>
                     <li><a href="MyQuestions.php?id=<?php echo $auth->id; ?>">My Questions</a></li>
                     <li><a href="Questions.php">View All Questions</a>
                     </ul>
                 </li>
                     <li><a href="Members.php">Members</a></li>
    </ul>



     <?php 

Here is the css:

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

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

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

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

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

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

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

#user_nav_future li { float:left; position:relative; }

#user_nav_future li ul { width:500px; display:none; position:absolute; top:34px; left:-20px;}

#user_nav_future li ul li { margin-right:5px; float:left;}

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

Thanks in advance.

1: http://www. newgencoal.com.au

Answer 1

This is your problem. You are positioning the inner-UL relative to the LI because of this rule:

#user_nav_future li { float:left; position:relative; }

Remove the position:relative part. and put it on here

#user_nav_future { position: relative; }

Because you want to be relative to the UL, not the inner-LI.

Now for the #user_nav_future li ul set left: 0px; and remove right