Горизонтальное меню с выпадающим списком, съезжает последняя кнопка.
Когда страница загружается все отлично, а секунд через 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 }