Mega DropDown Menu position issue

Question

I'm trying to create a mega drop down menu just like the one from the following link : http://i48.tinypic.com/2ln97ip.png

I have created this fiddle but the things aren't going well because of positioning and border of second ul is not ok :( http://jsfiddle.net/H8FVE/16/

<ul id="firstUl">
    <li><a>mainSimple</a></li>
    <li>
        <a>MainMenu</a>
        <ul id="secondUl">
            <li>
                <a>SecondLevel1</a>
                <ul id="lastLevel">
                    <li>
                        <a>LastLevelX</a>
                    </li>
                    <li>
                        <a>LastLevelY</a>
                    </li>
                </ul>
            </li>
            <li>
                <a>SecondLevel2</a>
                <ul id="lastLevel">
                    <li>
                        <a>LastLevel</a>
                    </li>
                    <li>
                        <a>LastLevel</a>
                    </li>
                     <li>
                        <a>LastLevel</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    </ul>


#firstUl{height:42px; position:relative; background:#ccc;}

#firstUl li{ float:left; border:1px solid #fff; padding:10px; border:1px solid red;}

#secondUl{display:none; background:#fafafa; }


#secondUl li{
float:left;
display:block;
border:1px solid #eaeaea;
}

#lastLevel{
display:none;
}


#firstUl li:hover> #secondUl{
border:1px solid red;
display:block;
position:absolute;
top:100%;

}

#firstUl li #secondUl li:hover> #lastLevel{
display:block;
    position:absolute;
    top:100%;
    left:0;
}


#firstUl li #secondUl li #lastLevel li{
float:none;
}

Can someone help me with this pls.

Answer 1

Try setting the #secondUl li to position:relative so that the child's (UL) position depends on it:

#secondUl li {
    ...
    position: relative;
}