html - CSS HTML : my drop down menu li is cutting off an image height

Question

在这里学习 html/css。我似乎不明白如何调整这个下拉菜单。我试图调整它以保存图像和名称，然后获得链接。

现在图像由于<li>而被切断高度，当我更改<li>时高度达到 100% 它会出现一些我不明白的奇怪行为。任何帮助我们了解正在发生的事情将不胜感激。

图像被截断

http://jsfiddle.net/FyU89/

添加高度后的奇怪行为:100%

.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
height: 100%
} 

http://jsfiddle.net/FyU89/1/

Answer 1

添加到你的CSS

ul.menu-drop li {
    display: inline-block;
}

Fiddle链接

更新: 添加新的 css 规则后，您会发现名称从 Chrome 上的图像旁边消失，至少对我来说是这样。要解决此问题，请在图像上添加 float: left，该名称将出现在 Chrome、Firefox 和 IE 上的图像旁边；然后您可以根据自己的喜好设计更多样式。 Fiddle与 float 变化的链接。