响应式导航栏隐藏在图像后面，图像不会向下，以便导航栏获得其位置

Question

enter image description here
这是导航栏的html代码。

<div class="fullwidth">

<div class="mainheader">
<img src="/thewebsitepoint/img/menu.png" alt="responsive-menu"/>
<form class="search">
<input type="text" placeholder="Search..."/>
</form>
<nav>
<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="ourwork.php">Work</a></li>
    <li><a href="team.php">Team</a></li>
    <li id="about"><a href="#About">About</a></li>
    <li><a href="contact.php">Contact</a></li>

</ul>
</nav>
</div>
</div>

这是导航栏的css部分

.mainheader{              /*mainheader*/
width: 90%;
height:60px;
margin-left: auto;
margin-right: auto;
/*overflow: hidden;*/
}
.mainheader img {        /*responsive-menu-image*/
display:none;

}

这是导航栏部分。在全宽度上它表现良好，但是当它响应时，主滑块图像不会下降。

nav ul {                 /*navbar starts*/
list-style: none;
float: right;
height: 60px;
}

nav li {
display: inline;
float: left;
width: auto;
height: 60px;
margin-right: 5px;
}

nav ul li a {
color: silver;
display: block;
line-height: 62px;
padding: 0px 25px;
}

nav ul li a:hover {
color: white;
background: #1abc9c;
}


.fullwidth {                /*full width for navigation-bar*/
width: 100%;
height: 60px;
background: black;
border-top: 5px solid #1abc9c;
border-bottom: 3px solid silver;
clear:both;
position: relative;
}

导航栏的响应式Css部分。     / ----------响应816 --------- /

@media screen and (max-width: 816px) {
.mainheader .search{         /*Navigation Bar = None*/
display: none;
}
nav ul {
width: 100%;
clear: both;
position: relative;
}
nav ul li {
width: 100%;
clear: both;
position: relative;
}
nav ul li a {
width: 100%;
text-align: center;
position: relative;
}


.mainheader img{                        /*Responsive Menu image*/
float:right;
display:block;
margin-top: 12px;
cursor: pointer;
}