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