Question

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

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

Relavant 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添加到input元素，因为那是需要调整大小的项目。

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

Fiddle

如何重新缩放悬停菜单。

1 个答案: