Question

I’m looking to solve quite a buggy issue I have with a menu. I’ve tagged this with jQuery, too – I’m thinking it can solve the issue faster.

I have a drop-down menu, made in CSS, with inner children. Unfortunately, I don’t know how many children links each parent may have and each of it left floated and block. I can’t edit the CSS each time there’s a new link added to add margin-left.

jsFiddle with the menu: http://jsfiddle.net/guBwZ/1/

What I’m after: I’m trying to display the inner links of Link #2 (also Link #3) right below the Link #2, somehow centered (see below jsFiddle).

jsFiddle with what I’m after: http://jsfiddle.net/6meU8/ (hover on Link #2 and Link #3).

Any help is highly appreciated.
Thank you.

UPATE:

Based on @craniumonempty example, I’ve updated the below jsFiddle with what I was looking for: http://jsfiddle.net/guBwZ/32/

Basically, I’ve moved from display:none to visibility:hidden to measure the width of inner UL and then move it inside the div.center.

Thank you!

Answer 1

first remove the div with the center. I’m not sure it’s even in a place it’s supposed to be either way.

Next: put “position:relative;” for “#menu ul li” that will line them up.

Then: remove height and width for “#menu ul li.sub-menu ul”

http://jsfiddle.net/guBwZ/12/

Is that kind of what you are looking for?

Also, if you want examples of multilevel working css menus:

http://ago.tanfa.co.uk/css/examples/menu/hs7.html

EDIT: ok, had to leave for a bit. Not sure where you are currently, but here is what I’ve got:

http://jsfiddle.net/guBwZ/14/

Not the best code in the world but works. Here is the jquery:

$(document).ready(function(){
    $("#menu").children("ul").children("li").hover(function(){
        var pos = $(this).position();
        var width = $(this).width();
        $(this).children("div.center").each(function(index){
            $(this).css("display","inline");
            var count = $(this).children("ul").children("li").length;
            var left = (pos.left+width/2)-((width*count)/2);
            if ( left < 0 ) { left = 0; }
            $(this).children("ul").each(function(index2){
                $(this).css("left",left);
                left += $(this).width();
            });
        });
    },
    function(){
        $(this).children("div.center").each(function(index){
            $(this).css("display","none");
        });
    });
});

html:

<div id="menu">
    <ul>
        <li class="active"><a href="#" title="#">Link #1</a></li>
        <li class="sub-menu">
            <a href="#" title="#">Link #2</a>
            <div class="center">
                <ul>
                    <li><a href="#" title="#">Link #2-1</a></li>
                    <li><a href="#" title="#">Link #2-2</a></li>
                </ul>
            </div>
        </li>
        <li class="sub-menu">
            <a href="#" title="#">Link #3</a>
            <div class="center">
                <ul>
                    <li><a href="#" title="#">Link #3-1</a></li>
                    <li><a href="#" title="#">Link #3-2</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#" title="#">Link #4</a></li>
        <li><a href="#" title="#">Link #5</a></li>
        <li>
            <a href="#" title="#">Link #6</a>
            <div class="center">
                <ul>
                    <li><a href="#" title="#">Link #6-1</a></li>
                    <li><a href="#" title="#">Link #6-2</a></li>
                </ul>
            </div>
        </li>
        <li class="nomarginright"><a href="#" title="#">Link #7</a></li>
    </ul>
</div>

and css:

#menu ul {
    list-style-type: none;
    overflow: auto;
    padding: 0;
    margin: 0;
}
#menu ul li {
    float: left;
    width: 111px;
}
#menu ul li a {
    font:normal 15px/19px Arial, sans-serif;
    color:#9a9b9d;
    display: block;
    padding: 11px 35px 10px 12px;
    text-decoration: none;
    text-transform:uppercase;
}

#menu ul li.active a {
    background:#FFF;
    color:#000;
}

#menu ul li:hover a, #menu ul li:hover div{
    background:#191c1f;
}
#menu ul li a:hover {
    color:#444;
}

#menu ul li:hover div{
    display:inline;
}

#menu ul li.active:hover a {
    background:#FFF;
    color:#000;
}

#menu ul li div {
    display:none;
    position:absolute;
    height:25px;
    width:100%;
    z-index:99;
    left:0;
}


#menu ul li div ul {
    position:absolute;
    left:30px;
}

#menu ul li div ul li a {
    padding: 3px 10px 3px 10px;
}