Question

在这里学习html / css。我似乎无法理解如何调整此下拉菜单。我正在尝试调整它以保存图像和名称，然后获取链接。

现在由于<li>高度，图像被切断了，当我将<li>高度更改为100％时，它会产生一些我不理解的奇怪行为。任何帮助都会非常感激，了解最新情况。

图像被切断

添加高度后的

奇怪的行为：100％

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

Answer 1

添加到您的CSS

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

<强>更新：添加新的css规则后，您会发现Chrome上的图片旁边的名称会消失，至少对我来说是这样。要解决此问题，请在您的图片上添加float: left，该名称将显示在Chrome，Firefox和IE上的图片旁边;然后你可以根据自己的喜好设计它。 Fiddle与浮动更改链接。

Answer 2

只是通过你的css和代码，看起来这些下拉将继承其父（.menu）的高度，设置为30px。图像似乎设置为48px的高度;这可能导致你的截止。

Answer 3

将此添加到您的css代码中：

ul.menu-drop li {
    height: 50px;
}

这样可以在菜单下拉菜单中设置列表的高度，使其足够大，可以显示图片。