I have got some issue with responsive menu in css. Everything works when menu horizontal is, but when browser-width is smaller than 700px, then works almost everything except one detail. I want to .menu slides over .content and cover them. I tried with floating and z-index but no positive result.

Basically I need the menu to **`slideDown`** and **`slideUp`** on the click of link `Menu` for the breakpoint **@media all and (max-width:700px)**

[Code](http://jsfiddle.net/dv55vvqe/1/)

```
<div class="navigator">
<div class="menu-icon">
    [MENU]
</div>
<div class="search">
    <input type="text">
</div>    
<div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Item One</a></li>
        <li><a href="#">Item Two</a></li>
        <li><a href="#">Item Three</a></li>
        <li><a href="#">Item Four</a></li>
    </ul>
</div>

```

 Content

```
body, html
{
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navigator
{
    background-color: #0171bb;
    overflow: hidden;
}
.menu-icon
{
    background-color: white;
    display: none;   
}
.menu
{
    width: 70%;
    float: left;
}
.menu ul
{
    margin:0;
    padding:0;
    list-style-type:none;
}
.menu ul:after
{
    content:'';
    display:block;
    clear:both;
}
.menu ul li
{
    float: left;
    padding: 0.5em;
    text-align: center;
}
.menu ul li:hover
{
  background-color: #004f82;
}
.menu ul li a
{
    text-decoration: none;
    display: block;
    color: black;
}
.search
{
    float: right;
    width: 25%;
    padding: 0.4em 2.5%
}
.search input
{
    width: 100%;
    padding: 0.2em;
    border: none;
    background-color: #004f82;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    outline: none;
    color: white;
}
.content
{
    width: 100%;
    height: 4em;
    background-color: lightgray;
    text-align: center;
    padding: 1em;
}
@media all and (max-width:700px)
{
    .menu-icon
    {
        display: inherit;
        float:left;
    }
    .menu
    {
        width: 100%;
        float:left;
        z-index:2;
    }
    .content
    {
        z-index:1;
    }
    .search
    {
        width: 50%;
    }
    .menu ul li
    {
        width: 100%;
    }
}

```