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