menuuuuuuuu

HTML

<div class="header">
    <div class="logo">LOGO</div>
    <div class="navigation">
        <div id="slidebox">
            <div id="toggle"> <a href="#">&#9776;</a>
 <a class="top" href="#slidebox">&#9776;</a>

            </div>
            <ul id="box" class="menu">
                <li><a href="#">Homepage</a>
                </li>
                <li><a href="#">About Us</a>
                </li>
                <li><a href="#">Services</a> 
                    <ul>
                        <li class="first"><a href="#">Webdesign</a>
                        </li>
                        <li class="last"><a href="#">Graphics</a>

                            <ul>
                                <li><a href="#">Logotype</a>
                                </li>
                                <li><a href="#">Banner</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="activeSelected"><a href="#">News</a>
                </li>
                <li><a href="#">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="search">SEARCH</div>
</div>
<div class="text">
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>

CSS

/* MENU IN DESKTOP */
 .menu {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: inline;
    height: 50px;
    line-height: 50px;
}
.menu .activeSelected {
    background: #0292a8;
}
.menu .activeSelected a {
    color: #fff;
}
.menu ul {
    display: none;
    list-style: none;
}
.menu li:hover > ul {
    display: block;
    white-space:nowrap;
}
.menu:after {
    content:"";
    clear: both;
    display: block;
}
.menu li {
    float: left;
}
.menu li:hover {
    background: #0292a8;
}
.menu li:hover a {
    color: #fff;
}
.menu li a {
    display: block;
    padding: 0 20px;
    color: #757575;
    text-decoration: none;
    font-size: 16px;
}
.menu ul {
    background: #00a1ba;
    padding: 0;
    position: absolute;
    top: 100%;
}
.menu ul li {
    float: none;
    border-bottom: 1px solid #0292a8;
    position: relative;
}
.menu ul li a {
    padding: 0 20px;
    color: #fff;
    display: block;
}
.menu ul li a:hover {
    background: #0292a8;
}
.menu ul ul {
    position: absolute;
    left: 100%;
    top:0;
    padding: 0;
}
/* MENU IN MOBILE */
 @media screen and (max-width: 640px) {
    /* main menu */
    .menu {
        list-style: none;
        display: inline;
        padding: 0;
        margin: 0;
        z-index: 99999;
    }
    .menu li {
        width: 100%;
        background: #00a1ba;
        text-align: center;
        border-bottom: 1px #0292a8 solid;
    }
    .menu li:last-child {
        border-bottom: 0px;
    }
    .menu li a {
        width: 100%;
        color: #fff;
        text-decoration: none;
        line-height: 50px;
    }
    .menu li:hover {
        width: 100%;
        background: #0292a8;
    }
    /* 1st submenu */
    .menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .menu ul li {
        width: 100%;
        background: #00a1ff;
        text-align: center;
        border-bottom: 1px #0292a8 solid;
    }
    .menu ul li:last-child {
       ...