Форум русской поддержки Joomla!® CMS
06.12.2016, 14:12:13 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

[Решено] Меню с выпадающим списком, съезжает последняя кнопка

 (Прочитано 230 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Xzizz
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 178


« : 25.12.2015, 07:15:18 »

Горизонтальное меню с выпадающим списком, съезжает последняя кнопка.
Когда страница загружается все отлично, а секунд через 2 , последняя кнопка заезжает под остальные, как побороть ?
Сайт на денвере, поэтому показать не могу.

HTML
Код:
<ul class="dropdown">
<li class="dropdown-top"><a class="dropdown-top" href="#">1</a>
<ul class="dropdown-inside">
<li><a href="#" title="!">1-1</a></li>
<li><a href="#" title="!">1-2</a></li>
<li><a href="#" title="!">1-3</a></li>
<li><a href="#" title="!">1-4</a></li>
</ul>
</li>
<li class="dropdown-top"><a class="dropdown-top" href="#">2</a>
<ul class="dropdown-inside">
<li><a href="#" title="!">2-1</a></li>
<li><a href="#" title="!">2-2</a></li>
<li><a href="#" title="!">2-3</a></li>
<li><a href="#" title="!">2-4</a></li>
</ul>
</li>
<li class="dropdown-top"><a class="dropdown-top" href="#">3</a>
<ul class="dropdown-inside">
<li><a href="#" title="!">3-1</a></li>
<li><a href="#" title="!">3-2</a></li>
<li><a href="#" title="!">3-3</a></li>
<li><a href="#" title="!">3-4</a></li>
</ul>
</li>
<li class="dropdown-top"><a class="dropdown-top" href="#">4</a>
<ul class="dropdown-inside">
<li><a href="#" title="!">4-1</a></li>
<li><a href="#" title="!">4-2</a></li>
<li><a href="#" title="!">4-3</a></li>
<li><a href="#" title="!">4-4</a></li>
</ul>
</li>
<li class="dropdown-top"><a class="dropdown-top" href="#">5</a>
<ul class="dropdown-inside">
<li><a href="#" title="!">5-1</a></li>
<li><a href="#" title="!">5-2</a></li>
<li><a href="#" title="!">5-3</a></li>
<li><a href="#" title="!">5-4</a></li>
</ul>
</li>
<li class="dropdown-top"><a class="dropdown-top" href="#">6</a>
<ul class="dropdown-inside">
<li><a href="#" title="!">6-1</a></li>
<li><a href="#" title="!">6-2</a></li>
<li><a href="#" title="!">6-3</a></li>
<li><a href="#" title="!">6-4</a></li>
</ul>
</li>
<li class="dropdown-top"><a class="dropdown-top" href="#">7</a>
<ul class="dropdown-inside">
<li><a href="#" title="!">7-1</a></li>
<li><a href="#" title="!">7-2</a></li>
<li><a href="#" title="!">7-3</a></li>
<li><a href="#" title="!">7-4</a></li>
</ul>
</li>
</ul>

CSS
Код:
ul.dropdown li { position: relative; z-index:1; }
ul.dropdown a {color: #fff }
 ul.dropdown,
 ul.dropdown-inside {
 list-style-type: none;
 padding: 0;
 
 }
 ul.dropdown-inside {
 position: absolute;
 left: -9999px;
 }
 ul.dropdown li.dropdown-top {
 display: inline;
 float: left;
 margin: 0 1px 0 0;
 }
 ul.dropdown li.dropdown-top a {
 padding: 3px 20px 4px;
 display: block;
 text-decoration:none;
 }
 ul.dropdown a.dropdown-top { background: #CCCCCC; border-radius:5px }
 ul.dropdown a.dropdown-top:hover { padding: 3px 20px 4px; }
 ul.dropdown li.dropdown-top:hover .dropdown-inside {
 display: block;
 left: 0;
 }
 ul.dropdown .dropdown-inside {background: #CCCCCC; border-radius:5px }
 ul.dropdown .dropdown-inside a:hover { background: #1FA2D6;border-radius:5px }
« Последнее редактирование: 25.12.2015, 13:43:05 от Xzizz » Записан
caleblt
Осваиваюсь на форуме
***

Репутация: +3/-0
Offline Offline

Сообщений: 56


« Ответ #1 : 25.12.2015, 09:31:38 »

Нужно показать код сайта как раз после этих двух секунд. Видимо контейнер по ширине меньше чем список.
Записан
Grigory S.
Завсегдатай
*****

Репутация: +68/-0
Offline Offline

Пол: Мужской
Сообщений: 685


(с)


« Ответ #2 : 25.12.2015, 10:36:43 »

И свойство display можно не указывать, если используется float.
Записан
Xzizz
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 178


« Ответ #3 : 25.12.2015, 13:42:36 »

Спасибо всем кто оставил комментарии, оказалось что достаточно было растянуть таблицу на 100% в которой находился список.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet