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

  • 3 Ответов
  • 361 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Xzizz

Горизонтальное меню с выпадающим списком, съезжает последняя кнопка.
Когда страница загружается все отлично, а секунд через 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, 14:43:05 от Xzizz »
Сайт за 5 минут - мечта.
Joomla для меня АД , я думал мне будет достаточно добавить текст и картинки ;)

*

caleblt

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

*

Grigory S.

И свойство display можно не указывать, если используется float.
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".

*

Xzizz

Спасибо всем кто оставил комментарии, оказалось что достаточно было растянуть таблицу на 100% в которой находился список.
Сайт за 5 минут - мечта.
Joomla для меня АД , я думал мне будет достаточно добавить текст и картинки ;)