как заставить мой <ul>зависать на старте в одном и том же месте? - PullRequest
Новая
       27

как заставить мой <ul>зависать на старте в одном и том же месте?

1 голос
/ 09 августа 2010

У меня есть навигационная панель 1024px, в которой есть пять категорий ссылок (ul). У некоторых из них есть выпадающие списки. Я настроил их идеально, чтобы выровнять по горизонтали. Тот, что в крайнем левом углу при наведении, идеально опускает текст к левому краю под навигационной панелью, как и предполагалось. При перемещении вниз вправо текст (скрытый текст) уходит так же далеко, как родительская ссылка. Я пытаюсь заставить их ВСЕМ идти к левому краю, когда завис над ними, независимо от того, где находится место в навигационной панели.

ЗДЕСЬ - это пример сайта с заголовком, который является прекрасным примером того, что я пытаюсь сделать

Вот мой 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

1 Ответ

2 голосов
/ 10 августа 2010

Это ваша проблема. Вы позиционируете внутренний 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

...