如何让我的 <ul> 悬停在同一个位置开始？答案

【问题标题】：how to make my <ul> hover start on the same exact spot?如何让我的 <ul> 悬停在同一个位置开始？
【发布时间】：2011-03-27 11:43:06
【问题描述】：

我有一个 1024 像素的导航栏，其中有五个类别是链接 (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

【问题讨论】：

确认一下，您是否要在此站点上实现类似于主导航的效果？ koumbit.org 另请注意，在该实现中，当子菜单项处于活动状态时，子菜单是持久的（即默认显示）。
关闭。这正是我所说的一个例子。 newgencoal.com.au

标签： html css drop-down-menu hover html-lists

【解决方案1】：

这是你的问题。由于这条规则，您正在相对于 LI 定位内部 UL：

#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

【讨论】：