表示できるナビゲーション バーのドロップダウン メニューがあります。
問題は、「オンライン予約」にカーソルを合わせると、ドロップダウン メニューの幅が非常に大きいため、「お問い合わせ」リンクが右側に押し出されることです。
ポジショニングを同じに保ちながら、これを防ぐ方法がわかりません。
どんな助けでも大歓迎です!
HTML:
<nav id="main-toplink">
<ul class="topnav">
<li><a href="#">Home</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Airport Transfers</a>
</li>
<li><a href="#">Accounts</a>
</li>
<li><a href="#">Online Booking</a>
<ul class="dropdown">
<li><a href="#">Cash Booking</a>
</li>
<li><a href="#">Account Booking</a>
</li>
<li><a href="#">Credit Card Booking</a>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</nav>
CSS:
#main-toplink ul a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #e5e5e5;
}
nav ul ul {
display: none;
}
nav ul {
display: inline-table;
list-style: none outside none;
padding: 0 0;
position: relative;
z-index: 500;
}
.dropdown li:before {
color: #FFF;
content: '►';
position: absolute;
font-size: 12px;
font-family: Arial;
top: 10px;
margin-left: 8px;
}
nav ul:after {
clear: both;
content: "";
display: block;
}
nav ul li {
float: left;
}
nav ul li a {
color: #757575;
display: block;
padding: 0px 22px 9px 20px;
text-decoration: none;
}
nav ul ul {
background: none repeat scroll 0 0 #222;
padding: 0;
position: relative;
top: 100%;
zoom: 1;
filter: alpha(opacity=95);
opacity: 0.95;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #FFFFFF !important;
padding: 10px 10px 10px 30px;
}
nav ul ul li a:hover {
background: none repeat scroll 0 0 #4B545F;
}
nav ul ul ul {
left: 100%;
position: absolute;
top: 0;
}
jQuery:
$(document).ready(function(){
$("#main-toplink li").hover(function(){
$(this).children("ul").slideDown(300);
},function(){
$(this).children("ul").slideUp(300);
});
});