Responsive Drop Down Menu for Bloggers

Css  Code

body {
margin: 0px;

}
#menu{

margin-top:0px;
margin-left: 0px;
margin-right:0px;
background: #9C1919;
color: #FFF;
height: 46px;
border-bottom: 1px solid #BF2A2A;
box-shadow: 1px 1px 1px #BF2A2A;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 1.1em oswald;text-shadow: 0px 0px 0px #838383;letter-spacing:0.5px;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
border-bottom: 0px solid #BF2A2A;

}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #9C1919;
}
#menu input{display:none;margin:0 0;padding:0 0;width:100px;height:40px;opacity:0;cursor:pointer}
#menu label{font:bold 30px oswald;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #9C1919;
position: absolute;
z-index: 99;
display: none;

}
#menu ul.menus li{

display: block;
width: 100%;
font:normal 1em oswald;
text-transform: none;
text-shadow: none;
border-bottom: 1px solid #BF2A2A;

}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

@media screen and (max-width: 800px){

  #menu{position:absolute,padding-top:20px;background:#9C1919;}
  #menu ul{background:#910A3E; width:94%;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
  #menu ul.menus{width:100%;position:static;padding-left:40px}
  #menu li{display:block;float:none;width:auto; font:normal 1.2em oswald;}


  #menu input,#menu label{font-family: 'Oswald', sans-serif; font-size:36px;top:0;left:0;display:block;float:left;margin-left:-45px; margin-top:5px;}
  #menu input{z-index:4}
  #menu input:checked + label{color:Yellow}
  #menu input:checked ~ ul{display:block}

}

HTML CODE

<nav id='menu'>


    <input type='checkbox'/>


 

<label><i class="fa fa-bars" style="float:right; "></i><span><h1 style=" font-family: 'Oswald', sans-serif; font-size:22px; font-weight:700; margin-left:30px;margin-top:0px;letter-spacing:0.6px;">HomeSpa18</h1></span>

</label>




<ul>
      <li><a href='http://www.iappnalysis.com/'><i class="fa fa-home fa-fw"></i>Home</a></li>

      <li><a href='http://www.iappnalysis.com/'><i class="fa fa-user"></i> About</a></li>
 



    <li><a href='#'>Apps<font size='1'>&#9660;</font></a>
    <ul class='menus'>
       
       
         <li><a href='http://www.iappnalysis.com/search/label/Socialnetworking'><span>Social Networking</span></a></li>
         <li><a href='http://www.iappnalysis.com/search/label/Sports'><span>Sports</span></a></li>
         <li><a href='http://www.iappnalysis.com/search/label/Travel'><span>Travel</span></a></li>
         <li class='last'><a href='http://www.iappnalysis.com/search/label/Utilities'><span>Utilities</span></a></li>
    </ul>

<li><a href='#'>Apps<font size='1'>&#9660;</font></a>
    <ul class='menus'>
       
       
         <li><a href='http://www.iappnalysis.com/search/label/Socialnetworking'><span>Social Networking</span></a></li>
         <li><a href='http://www.iappnalysis.com/search/label/Sports'><span>Sports</span></a></li>
         <li><a href='http://www.iappnalysis.com/search/label/Travel'><span>Travel</span></a></li>
         <li class='last'><a href='http://www.iappnalysis.com/search/label/Utilities'><span>Utilities</span></a></li>
    </ul>


<li><a href='#'>Apps<font size='1'>&#9660;</font></a>
    <ul class='menus'>
       
       
         <li><a href='http://www.iappnalysis.com/search/label/Socialnetworking'><span>Social Networking</span></a></li>
         <li><a href='http://www.iappnalysis.com/search/label/Sports'><span>Sports</span></a></li>
         <li><a href='http://www.iappnalysis.com/search/label/Travel'><span>Travel</span></a></li>
         <li class='last'><a href='http://www.iappnalysis.com/search/label/Utilities'><span>Utilities</span></a></li>
    </ul>

<li><a href='http://www.iappnalysis.com/'><i class="fa fa-home fa-fw"></i>Home</a></li>

      <li><a href='http://www.iappnalysis.com/'><i class="fa fa-user"></i> About</a></li>



</li></li></li></ul>


        </nav>

Source

https://codepen.io/smexysumo/pen/MwjxXB