Question

我们真的很接近解决这个问题，只需要一些帮助来解决问题。一切正常，但我们如何让嵌套的'ul'显示相对于它的父'li'（即直接在父li之下）？

这是HTML：

<ul id="continent">
        <li><a href="#">Europe</a>
            <ul>
            <li><a href="#">CountryA</a></li>
            <li><a href="#">CountryB</a></li>
            <li><a href="#">CountryC</a></li>
            </ul>
        </li>
        <li><a href="#">Middle East</a>
            <ul>
            <li><a href="#">CountryD</a></li>
            <li><a href="#">CountryE</a></li>
            <li><a href="#">CountryF</a></li>
            </ul>
        </li>
        <li><a href="#">Africa</a>
            <ul>
            <li><a href="#">CountryG</a></li>
            <li><a href="#">CountryH</a></li>
            <li><a href="#">CountryI</a></li>
            </ul>
        </li>
        <li><a href="#">Asia</a>
            <ul>
            <li><a href="#">CountryJ</a></li>
            <li><a href="#">CountryK</a></li>
            <li><a href="#">CountryL</a></li>
            </ul>
        </li>
</ul>

这里是CSS：

ul#continent{position:relative;}
ul#continent li{display:inline; list-style-type:none;}

ul#continent li ul{display:none;}
ul#continent li:hover {cursor:pointer;}
ul#continent li:hover ul{display:block; position:absolute; top:52px; margin:-20px 0 0 -10px; padding:20px; width:160px; z-index:999;}
ul#continent li:hover ul li{display:block; padding:3px 10px;}

提前感谢您的帮助！

Answer 1

使用float:left;和float:none;代替display:inline;。而不是使用margin或padding。

ul#continent li{float:left; list-style-type:none;}
ul#continent li:hover ul li{float:none; padding:3px 10px;}

<强> DEMO

在演示2中，您会看到css中的一些background-color，width & height，margin和text-align更改的结果。

<强> DEMO 2

Answer 2

将position: relative从ul#continent移至第一级li这将允许您将嵌套的ul相对于相应的li < / p>

ul#continent li {
    position:relative;
}
ul#continent li:hover ul {
    left: 0;
}

缩减top，margin和padding会使ul更接近li。

JSFiddle

如何将垂直菜单定位为水平父<li> </li> </ul>下的嵌套<ul>

2 个答案: