html - 如何重新缩放悬停菜单。

Question

你好，我在正确地重新缩放悬停菜单时遇到了问题，所以每个人都知道我的意思，然后我制作了这个 1 分 19 分钟的视频来说明我的问题。

视频链接:https://www.youtube.com/watch?v=6sYdmjivW2A&feature=youtu.be

相关HTML代码:

<div id="HoverMenu">
<ul style="list-style:none;">
    <li><form action="HomeDanish.html" method="get"><input id="Denmark" type="image" src="Denmark.png"></form>
        <ul style="list-style:none;">
            <li><form action="HomeEnglish.html" method="get"><input id="England" type="image" src="England.png"></form></li>
            <li><form action="HomeGerman.html" method="get"><input id="Germany" type="image" src="Germany.png"></form></li>

        </ul>
    </li>
</ul>

我的相关CSS代码:

#Logo{
position: absolute;
height: auto;
width: 19.32%;
top: 4.5vw;
left: 4.7vw;

}


* { 
margin: 0;
padding: 0;
}

#HoverMenu{ 
position: absolute;
top:0.5vw;
left:27vw;
width: 4.5%;
height: auto;
}

#HoverMenu > ul > li {
position: relative; 
background: transparent;
display: inline-block;
}

#HoverMenu ul ul {
display: none;
position: absolute;
top:100%;
left:0;
background: transparent;
}

#HoverMenu ul li:hover ul {
display: block;
}

我知道我的输入标志上有 ID，但我的 css 文档中没有使用它们，我尝试使用该 ID 并以这种方式缩放标志。但没有运气。

提前感谢您的贡献!

Answer 1

您可能希望将 CSS 添加到输入元素，因为这是需要调整大小的元素..

#HoverMenu ul li form input
{
  width: 100%;
  height: auto;
}

Fiddle