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

Posted 2023-05-08

【中文标题】如何让我的 <ul> 悬停在同一个位置开始？

【英文标题】：how to make my <ul> hover start on the same exact spot?

【发布时间】：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

【参考方案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