我们真的要解决这个问题,只需要一点帮助就可以解决问题。一切正常,但是如何使嵌套的“ 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;}


在此先感谢您的帮助!

最佳答案

使用float:left;float:none;代替display:inline;。而不是和marginpadding一起玩。

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


DEMO

在演示2中,您会在CSS中看到background-colorwidth & heightmargintext-align的一些变化。

DEMO 2

10-05 20:39
查看更多