如何让我的将鼠标悬停在同一位置开始？

Question

我有一个 1024px 导航栏，有五个类别，这些类别是链接（ul），其中一些有下拉菜单。我将它们完美地设置为水平对齐。当悬停时，最左边的一个会按照预期将文本完美地下拉到导航栏下方的左边缘。当您向下移动到右侧时，文本（悬停的文本）只会到达父链接的最左侧。我试图让它们在悬停在导航栏中的任何位置时都转到左侧边缘。

HERE 是一个网站示例，该网站的标头是我

在这里 尝试执行的操作的完美示例是我的 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 

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

提前致谢。

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

Answer 1

这是你的问题。由于以下规则，您将内部 UL 相对于 LI 定位：

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

删除 position:relative 部分。并把它放在这里

#user_nav_future { position: relative; }

因为你想与 UL 相关，而不是与内部 LI 相关。

现在为 #user_nav_future li ul 设置 left: 0px; 并删除 right