0

次のリンクのようなメガドロップダウンメニューを作成しようとしています：http：//i48.tinypic.com/2ln97ip.png

私はこのフィドルを作成しましたが、2番目の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;
}

誰かがこのplsで私を助けることができますか？

4

1 に答える 1

3

#secondUl liをposition：relativeに設定して、子（UL）の位置がそれに依存するようにしてください。

#secondUl li {
    ...
    position: relative;
}
于 2012-10-22T08:42:27.643 に答える