what would be the simplest / best way of creating a dropdown menu with the following look (has odd borders and needs to be dynamic)

Question

I have the following html

<ul id="header">
        <li class="dropdown"><span>Our Locations</span>
            <ul>
                <li><a href="">London</a></li>
                <li><a href="">New York</a></li>
            </ul>
        </li>
    <li class="dropdown"><span>Language Selector</span>
        <ul>
            <li><a href="">English</a></li>
            <li><a href="">German</a></li>
            <li><a href="">French</a></li>
            <li><a href="">Chinese</a></li>
            <li><a href="">Mandarin</a></li>
        </ul>
    </li>
</ul>

And am trying to get a menu which looks the following way

The difficulty the odd shape of the background and the fact that the text will change with translations of the site.

At present I have the following javascript

(function ($) {

    $.fn.dropDownMenu = function () {
        $.each(this, function () {
            var li = $(this);
            li.hover(function () {
                $(this).addClass("hover");
                $('ul:first', this).css('visibility', 'visible');
            }, function () {
                $(this).removeClass("hover");
                $('ul:first', this).css('visibility', 'hidden');
            });
        });
    }

    $(function () {
        $(".dropdown").dropDownMenu();
    });

})(jQuery);

The only way I can see possibly working is absolutely positioning the inner ul (contained by the li.dropdown) which will give me a box, z-indexing the parent li on top using left/right/top borders to get the join of the two boxes and then maybe adding an extra div to cover any overlap parent li. Am wondering if there is a better way?

Answer 1

Try this... it took a little while to figure out, and I haven't tested it for cross browser, but it works on IE 9. will probably need tweaking.

I added a div with a high z-index to mask part of the top border for the nested <ul>

CSS:

#header {
    margin:0;
    padding:6px 0 5px 0;
    background-color:#FFFFFF;
    list-style-type:none;
}

li.dropdown {
    position:relative;
    display:inline;
    margin:0;
    padding:0;

}

div.borderMask {
    position:absolute;
    display:none;
    background-color:#FFFFFF;
    padding:1px;
    height:1px;
    line-height:1px;
    right:0px;
    left:0px;
    top:13px;
    z-index:1000;
}   

li.dropdown ul {
    position:absolute;
    display:none;
    background-color:#FFFFFF;
    border:solid 1px #CCCCCC;
    width:150px;
    right:-1px;
    top:13px;
}

li.dropdown:hover {
    background-color:#FFFFFF;
    border-top:solid 1px #CCCCCC;
    border-left:solid 1px #CCCCCC;
    border-right:solid 1px #CCCCCC;
}

li.dropdown:hover ul {
    display:inline;
}
li.dropdown:hover div.borderMask {
    display:block;
}

HTML:

<ul id="header">
    <li class="dropdown"><span>Our Locations</span>
        <div class="borderMask"></div>
        <ul>
            <li><a href="">London</a></li>
            <li><a href="">New York</a></li>
        </ul>
    </li>
    <li class="dropdown"><span>Language Selector</span>
        <div class="borderMask"></div>
        <ul>
            <li><a href="">English</a></li>
            <li><a href="">German</a></li>
            <li><a href="">French</a></li>
            <li><a href="">Chinese</a></li>
            <li><a href="">Mandarin</a></li>
        </ul>
    </li>
</ul>