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;
}

Mega DropDown菜单位置问题

1 个答案: