Responsive mini menu Drop Down Menu

Responsive mini menu Drop Down Menu

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav class="clearfix">
    <ul class="andrewsrwdmenu">
        <li> <a href="#"  class="brand"><i class="fa fa-connectdevelop fa-lg"></i> </a></li>
       
       <li><a href="#"><span>Floor 1</span></a>
            <ul class="myoptions">
                <li><a href="#">Room 1</a></li>
                <li><a href="#">Room 2</a></li>
                <li><a href="#">Room 3</a></li>
            </ul>
            </li>  
    </ul>
</nav>

CSS

nav ul {
	-webkit-font-smoothing:antialiased;
	text-shadow:0 1px 0 #FFF;
    background: #f4f5eb;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    min-width: 25%;
}
nav a {
    background: #f4f5eb;
    color: #444;
    display: block;
    font: bold 16px/50px sans-serif;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}

nav .dropdown:after {
    content: ' \f138';
    font-family: FontAwesome;
}
nav .dropdown:hover:after{
	content:' \f13a'
}
nav li:hover a {
    background: #e3e4d7;    text-decoration:none

}
nav li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
.brand{color:#777777;}
.ddmenu{  opacity: 0.9;
    top: 50px;
    visibility: visible;}
nav li ul li {
    float: none;
    width: 100%;
}
nav li ul a:hover {
    background: #cccdbe;
    text-decoration:none
}

/* Clearfix menu */

.andrewsrwdmenu:after, .andrewsrwdmenu:before {
    content:"";
    display:table;
}
.andrewsrwdmenu:after {
    clear:both;
}
.andrewsrwdmenu {
    zoom:1;
}


@media screen and (max-width: 300px) {
    .andrewsrwdmenu li a {
     font-size:0.9em
    }
    .andrewsrwdmenu{min-width:140px}
}

JavaScript

$(".dropdown").click(function(){
$("nav li ul.myoptions").toggleClass("ddmenu");
});