html - 超级下拉菜单位置问题

Question

我正在尝试创建一个大型下拉菜单，就像以下链接中的菜单一样：http: //i48.tinypic.com/2ln97ip.png

我已经创建了这个小提琴，但是由于第二个 ul 的定位和边框不好，事情进展不顺利:( 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;
}

有人可以帮我解决这个问题吗？

Answer 1

尝试将 #secondUl li 设置为 position:relative 以便孩子的 (UL) 位置取决于它：

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