Jquery，移动下拉位置

我正在使用Jquery FanHydropdown菜单进行导航，在将下拉面板与选项卡左侧对齐时遇到了问题。它们被定位在更左边的几个像素处。 这是我第一次使用jquery，它整晚都让我有点疯狂！如果您能帮我一点忙，我将不胜感激

谢谢

网址是

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

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

我的导航HTML是

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

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

这将导致导航中的定位点在菜单显示位置的左侧四倍凸起：

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

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

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

如果要将其向右对齐，请执行以下操作：

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

ul.下拉列表{
[...]
左：0；非常感谢！太完美了。如果不太麻烦的话，您能告诉我，如果我想让下拉列表与选项卡的右侧对齐，我需要修改哪些内容吗？还有#菜单ul li a是什么{实际控制？如果这是打开你没有时间的潘多拉魔盒，那就没什么戏剧性了！干杯。
#menu ul li a
选择
中的所有锚，该锚位于id为
#menu
的元素中的
中。要将其向右对齐，请参见上文。