how to align submenu on top

Question

i have a menu (yellow) with a submenu (first column) and another submenu.

I need to know how i can make the submenu always stay on the top.

// menu in the middle
.leftMenu ul li .pchild {
    width: 193px;
    list-style: disc!important;
}
// child menu ( on the right )
    .leftMenu ul li .pchild li .childpost {
    padding-left: 20px;
    display: none;
    position: absolute;
    top: 0px;
    left: 175px;
    width: 413px;
}

To make it easy: This is the website : http://www.ruigrok-nederland.nl/

Answer 1

It currently displays like that because it is relative to the li element. You will need to make it relative to the div.child element or like that.

For your code add position:static to your .leftMenu ul li .pchild li. Something like this:

.leftMenu ul li .pchild li {
    position:static
}

That is, in your style.css at line 140.

Update:

For your second question in the comments you will have 2 options:

• use a jQuery plugin like hoverIntent or one of the many menu plugins that work like a charm on all platforms
• write your css like this:

Add this new style:

.leftMenu ul li div.post{
    position: absolute;
    top: 0px;
    left: 175px;
    z-index: 10;
    width: 413px;
    height: 100%;
    display: none;
}

.leftMenu ul li .pchild li:hover .post {
    display: block;
}

Remove:

padding-left: 20px;
display: none;
position: absolute;

.leftMenu ul li .pchild li:hover .childpost {
    display: block;
}

from .leftMenu ul li .pchild li .childpost

Change your padding values like this on .leftMenu .child

padding: 0 24px 0 0!important;

Answer 2

Here is one approach:

.leftMenu .child {
    top:35px;
}

.leftMenu ul li {
    position:static;
}

The submenu elements were being absolutely positioned relative to the parent li elements. Either remove the relative positioning on the .leftMenu ul li element or change it to static. In addition, you also need to add top:35px to .leftMenu .child.