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 更改链接。