Question

I am building a navigation bar which will be located at the top of every page on the CMS I am developing. This navigation bar contains a series of images and text links, some of which will trigger a drop-down menu.

I am having trouble with several parts of this navigation bar, take a look at this Fiddle http://jsfiddle.net/spryno724/uARnf/:

1. I cannot get the right side of the drop-down menus to line-up with the right side of the menu triggers.
2. How can I have the menu disappear when the user clicks outside of the menu and it’s trigger?
3. [BONUS!!!] When the preview frame loads, there is a small amount of left/right scrolling that you can do. This is the same in the actual application. How can I remove that?

Sorry for the crash list of questions, but I am at a really big hang-up. Could someone help me resolve these?

Thank you for your time!

Answer 1

The code below should cover all your issues. Just replace your CSS rules and jQuery/JavaScript with the below code. Live example: http://jsfiddle.net/uARnf/5/

CSS:

nav.pluginBar ul.pluginBarRight li {
    display: inline-block;
    *display: inline; /* Invalid CSS, but necessary for IE7 to display each of the unordered list item in-line :( */
    zoom: 1; /* Invalid CSS again, but necessary for IE7 to treat the unordered list item as block-level elements :( */
    vertical-align : top;
    height: 35px;
    color: #999;
    clear: both;
    position: relative; /* Added this */
}

nav.pluginBar ul.pluginBarRight li div {
    background: #2d2d2d;
    width: 250px;
    position: absolute;
    right: 0; /* Added this */
    top: 35px;
    display: none;
}

jQuery:

$(function() {
    $(document).click(function () {
        $('.pluginBarRight li div').hide();
    });  
    $('.pluginBarRight li').click(function () {
        $('.pluginBarRight li div').hide();
        $(this).children('div').show();
        return false;
    });
});