0

ナビゲーションにJqueryのファンシードロップダウンメニューを使用していますが、ドロップダウンパネルをタブの左側に揃えるのに問題があります。それらはさらに数ピクセル左に配置されます。これはjqueryを使うのは初めてで、一晩中少し頭がおかしくなりました。少しの助けをいただければ幸いです！

ありがとう

URLは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>
4

1 に答える 1

0

これにより、ナビゲーションのアンカーがメニューが表示されている場所の左側に4pxバンプされます。

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

これは、ドロップダウンの左側にマージンを追加することで修正できます。

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

これを右に揃えたい場合は、次のようにします。

ul.dropdown {
    [...]
    left:0; <-Remove this line
    right:0;
}
于 2012-04-03T22:01:38.637 に答える