Question

I’m using a Jquery fancydropdown menu for my navigation and am having trouble aligning the dropdown panels in line with the left side of the tabs. They are positioned a few pixels further left.
This is my first go with jquery and it’s been driving me a little crazy all night! A little help would be much appreciated!

Thanks

The URL is http://www.amuletbhutan.com/dev

My CSS is:

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

My HTML for the navigation is

<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

This is causing the anchors in the navigation to be bumpped 4px to the left of where your menu is showing up:

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

This can be fixed by adding a margin to the left side of the dropdown:

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

If you wanted to align this to the right you would do the following:

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