Как сделать мои подссылки / текст горизонтальными при воспроизведении? - PullRequest
Новая
       17

Как сделать мои подссылки / текст горизонтальными при воспроизведении?

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

У меня есть навигационная панель с выпадающим списком, которая прекрасно работает. Единственное, что я пытаюсь изменить, это когда вы наводите курсор на основные ссылки, под-ссылки / текст располагаются друг над другом. Я хочу, чтобы они отображались горизонтально. Я перепробовал все виды поплавков и встроенного дисплея и т.д ...

Вот часть HTML-кода: 

<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>
</ul>

Вот CSS: 

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

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

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

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

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

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

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

#user_nav_future li { 
    float:left; 
    position:relative; 
    text-align:center;
}

#user_nav_future li ul { 
    display:none; 
    position:absolute; 
    top:34px; 
    left:0;
}

#user_nav_future li ul li { 
    width:160px;
}

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

1 Ответ

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

Эти изменения должны помочь: 

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

#user_nav_future ul {
    /* Reset padding / margins on <ul>.  Add back in as necessary. */
    padding: 0;
    margin: 0;
    list-style: none; 
}

#user_nav_future ul li {
    /* Take <li> out of the picture - everything is now being dictated by nested <a> */   
    padding: 0;
    margin: 0;     
    display: inline;
}

#user_nav_future ul li a {
    /* whatever width you want each link to be.  Since you've got 10px of left/right padding, true element width will be 180px */
    width: 160px; 
    padding: 10px;  
    float: left;

    position: relative; 
    text-decoration: none;
    text-align: center;

    color: #fff; 
}

#user_nav_future li ul a { 
    color: #666; 
}

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

#user_nav_future li ul { 
    display: none; 
    position: absolute; 
    top: 34px; 
    left: 0;
}

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

Они устанавливают все элементы блока, которые заставляют ваши выпадающие меню переходить во встроенные элементы, которые перемещаются так, чтобы меню было горизонтальным.

Я также перенес управление позиционированием на элементы <a>. Таким образом, будет доступна вся область ссылки, а не только текст.

Если вышеперечисленное не работает для вас, опубликуйте часть своего HTML-кода или ссылку для разработчика, чтобы мы могли видеть, что происходит.

...