gpt4 book ai didi

css - 菜单图标不消失

转载 作者:太空宇宙 更新时间:2023-11-04 09:36:44 27 4
gpt4 key购买 nike

我的菜单图标有问题。对于我的桌面 css,我设置为不显示。在 1000px 以下,我将其设置为显示 block 。到目前为止,所有设备都显示该图标。感谢您提供任何帮助。

/* blah blah blah */

.icon-dropdown {
display: none;
}

@media screen and (max-width: 1000px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}




}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vintage McDonald's</title>
<meta id="meta" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/jpg" href="mcdonaldsoldlogo.png">
</head>
<body>
<div class="wrapper">
<header>
<a href="index.html"><img src="vintagelogo.jpg" width="90px" height="90px"></a>
<h1>Vintage McDonald's!</h1>
<div class="icon-dropdown">
<div></div>
<div></div>
<div></div>
</div>
</header>
<span class="menu-trigger">Menu</span>
<nav>
<ul>
<li><a href="about.html">ABOUT MCDONALD'S</a></li>
<li><a href="classics.html">OUR CLASSICS</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
<div class="slideShow">
<img class="placeHolder" src="1.jpg">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<div class="slideOverlay"><p>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</p>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="menu.js"></script>
</body>
</html>

最佳答案

尝试使用这个媒体查询:

@media (max-width: 800px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}

}

之后,尝试缩小浏览器看看效果。

关于css - 菜单图标不消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40275435/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com