Question

当您将页面调整为600像素时，它应该摆脱菜单并放置一个菜单按钮，您可以单击该按钮。点击它至少一次，然后关闭菜单，然后调整页面大小，使其超过600像素，菜单不再出现。为什么会这样？

*{
font-family: "Helvetica Neue", Helvetica, Verdana, "Segoe UI", Arial;
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
list-style-type: none;
}
body{
color: white;
font-size: 15px;
background: #ddd;
}
a{
color: darkblue;
font-weight: bold;
}

.logo{
width: 60%;
max-width: 335px;
max-height: 50px;
vertical-align: center;
}
.menuicon{
width: 80%;
max-width: 20px;
}

header img{
max-height: 50px;
}
header{
height: 50px;
background: #222;
color: white;
}
.menu{
display: block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
border-bottom: solid 1px #111;
z-index: 10;

}
.menu li {
float: left;
}

.menu li a {
display: block;
color: white;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}

.menu li a:hover:not(.active) {
background-color: #444;
}

.menu li a.active {
color: white;
background-color: #0abee6;
}

.ulimg{
float: right;
padding: 10px !important;
display: none;
}
@media screen and (max-width: 600px) {

.ulimg{
    display: block;
}
.menu{
    border-bottom-left-radius: 10px;
    display: none;
    position: absolute;
    right: 0;
}

.menu {
    float: right;
    overflow: visible;
    list-style-type: none;
    width: 200px;
    border: solid 1px black;
    border-top: none;
}
.menu li{
    float: none;
}

.menu li a {
    text-align: left;
    }

.menu li:last-child a{
    border-bottom-left-radius: 10px;
    border-bottom: none;
}
}

<body>
    <header>
        <img src="images/MashyIndustriesLongTrans.png" class="logo">
        <a class="ulimg" href"#lol"><img src="images/menu.png"  onclick="toggle_visibility('panel')" class="menuicon"/></a>
    </header>
    <ul id="panel" class="menu">
        <li><a href="home.html" class="active">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="investors.html">Investors</a></li>
    </ul>
    <script type="text/javascript">
     function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
    </script>
</body

使用Javascript后，UL菜单不会显示

0 个答案: