CSS - 导航栏下拉悬停

Question

我有一个下拉菜单，导航栏，您可以查看： -

http://jsfiddle.net/pHyqh/

的问题是，当你将鼠标悬停在“网上预约”是推右侧的“联系我们”链接，因为下拉菜单的宽度非常大。

我不知道如何防止这种情况发生，同时保持定位相同。

任何帮助将不胜感激！

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); 

    }); 

}); 

Answer 1

只需添加一个位置，而不是绝对的相对这里

nav ul ul { 
    background: none repeat scroll 0 0 #222; 
    padding: 0; 
    position: absolute; 
    top: 100%; 
    zoom: 1; 
    filter: alpha(opacity=95); 
    opacity: 0.95; 
} 

小提琴这里：http://jsfiddle.net/pHyqh/1/

/* Top Navigation */ 
#main-toplink { 
    position:relative; 
    margin:0 auto; 
    height:36px; 
    width:1007px; 
    margin-top: 7px; 
} 
#main-toplink ul a { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #000; 
} 
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: absolute; 
    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; 
} 
/* Links */ 
a:link { 
    color:#3a3a3a; 
    text-decoration:none; 
} 
/* Company Colour */ 
a:visited { 
    color:#3a3a3a; 
} 
a:hover { 
    color:#3a3a3a; 
} 
a:active { 
    color:#3a3a3a; 
} 
a.navicon:link { 
    text-decoration:none; 
    outline:none; 
    padding-left:5px; 
    padding-right:5px; 
} 
a.navicon:visited { 
    text-decoration:none; 
} 
a.navicon:hover { 
    text-decoration:none; 
} 
a.navicon:active { 
    text-decoration:none; 
} 
a.whitelink:link { 
    color:#FFF; 
    text-decoration:none; 
} 
a.whitelink:visited { 
    color:#FFF; 
    text-decoration:none; 
} 
a.whitelink:hover { 
    color:#FFF; 
    text-decoration:underline; 
} 
a.whitelink:active { 
    color:#FFF; 
    text-decoration:none; 
} 
a.greylink:link { 
    color:#999; 
    text-decoration:none; 
} 
a.greylink:visited { 
    color:#999; 
    text-decoration:none; 
} 
a.greylink:hover { 
    color:#999; 
    text-decoration:underline; 
} 
a.greylink:active { 
    color:#999; 
    text-decoration:none; 
} 
a.a-topheader-infotext:link { 
    text-decoration:none; 
    outline:none; 
    font-weight:bold; 
} 
a.a-topheader-infotext:visited { 
    text-decoration:none; 
    font-weight:bold; 
} 
a.a-topheader-infotext:hover { 
    text-decoration:underline; 
    font-weight:bold; 
} 
a.a-topheader-infotext:active { 
    text-decoration:none; 
    font-weight:bold; 
} 

Answer 2

nav ul ul { 
background: none repeat scroll 0 0 #222; 
padding: 0; 

position: absolute; 

top: 100%; 
zoom: 1; 
filter: alpha(opacity=95); 
opacity: 0.95; 
}