jquery - Jquery，移动下拉位置

Question

我正在使用 Jquery fancydropdown 菜单进行导航，并且无法将下拉面板与选项卡的左侧对齐。它们位于左侧几个像素处。这是我第一次使用 jquery，整晚都让我有点发疯！一点帮助将不胜感激！

谢谢

网址是http://www.amuletbhutan.com/dev

我的 CSS 是：

/* body
*************************/
body {
    font: 12px/19px Georgia, serif;
    color: #370707;
}

/* links
*************************/
a:link, a:visited, a:hover, a:active {
    text-decoration: none;
}

/* inline elements
*************************/
strong {
    font-weight: bold;
}

/* tabs
*************************/
ul.tabs {
    display: table;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

ul.tabs li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table-cell;
    float: left;
    position: relative;
}

ul.tabs a {
    position: relative;
    display: block;
}

/* dropdowns
*************************/
ul.dropdown {
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    z-index: 999;
    top: 100%;
    width: 250px;
    display: none;
    left: 0;
}

ul.dropdown ul.dropdown {
    top: 0;
    left: 100%;
}

ul.dropdown li {
    margin: 0;
    padding: 0;
    float: none;
    position: relative;
    list-style: none;
    display: block;
}

ul.dropdown li a {
    display: block;
}


/* menu-specifc
*************************/
#menu {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #f4f2ea url(../images/topbg.gif) repeat-x;
    clear: both;
}

#menu ul {
    margin: 0 auto;
}

#menu ul li.hasmore {

}

#menu ul li h4 {
    margin: 0;
}

#menu ul li h4 a {
    font-size: 14px;
    color: #000;
    font-weight: bold;
    padding: 0 15px;
}

#menu ul li a {
    color: #9b2021;
    padding-left: 4px;
}

#menu ul li a img {
    vertical-align: middle;
}

#menu ul li a:hover {
    background: url(../images/topselectionleft.png) top left no-repeat;
}

#menu ul li a span {
    display: block;
    padding: 0 15px 0 11px;
}

#menu ul li a:hover span {
    background: url(../images/topselectionright.png) top right;
}

#menu ul.dropdown {
    padding: 8px;
    background-image: url(../images/dropdown.png);
    overflow:hidden;
    border-bottom: 1px solid #dac9b5;
    width: 165px;
}

#menu ul.dropdown li a {
    border-bottom: 1px solid #dac9b5;
    line-height: 20px;
    overflow: hidden;
    height: 20px;
}

#menu ul.dropdown li.last a {
    border-bottom-width: 0;
}

#menu ul.dropdown li a:hover {
    background: url(../images/menuarrow.png) no-repeat left center;
}

#menu ul li h4 a:hover {
    background-image: none;
}

我的导航 HTML 是

<div id="menu">
    <ul class="tabs">
        <li><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>About Bhutan</span></a></li>
        <li class="hasmore">
            <a href="#"><span>The Amulet Difference</span></a>
            <ul class="dropdown">
                <li><a href="#">Our Philosophy</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Why Choose Amulet?</a></li>
                <li class="last"><a href="#">Contact Us</a></li>
            </ul>
        </li>
        <li class="hasmore">
            <a href="/about/#networks"><span>Your Private Journey</span></a>
            <ul class="dropdown">
                <li><a href="#">Getting to Bhutan</a></li>
                <li><a href="#">Your Arrival</a></li>
                <li><a href="#">Tailor Made Tour</a></li>
                <li class="last"><a href="#">Luxury Accommodation</a></li>
            </ul>
        </li>
        <li class="hasmore">
            <a href="#"><span>Experiences</span></a>
            <ul class="dropdown">
                <li><a href="#">Wellbeing, Spa & Yoga</a></li>
                <li class="last"><a href="#">Specialty Tours</a></li>
            </ul>
        </li>
        <li><a href="#"><span>Rates &amp; Reservations</span></a></li>
    </ul>
</div>

Answer 1

这会导致导航中的锚点在菜单显示位置的左侧增加 4px：

#menu ul li a {
    [...]
    padding-left:4px;
}

这可以通过在下拉列表的左侧添加边距来解决：

#menu ul.dropdown {
    [...]
    margin-left:4px;
}

如果您想将其与右侧对齐，您将执行以下操作：

ul.dropdown {
    [...]
    left:0; <-Remove this line
    right:0;
}