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

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 中，您会看到它带有一些 background-color、width & height、margin 和 text-align 更改 css 的外观。

DEMO 2