I am using a drop down menu using pure css. I need a good responsive drop down navigation menu for the below ordinary css menu code. I need the responsive using pure css and not in javascript or jquery.
I am trying to do a responsive using pure css but i could not able to do a perfect one. Any one please help me. Thanks in advance.
ul.menu{
float:right;
}
ul.menu > li{
float:left;
list-style:none;
}
ul.menu > li.current-menu-item a{
background: #5C5C5C;
color:#fff;
}
ul.menu > li > a{
padding: 31px;
display:block;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
ul.menu > li > a:hover{
background: #5C5C5C;
color:#fff;
}
ul.menu > li:hover > ul.sub-menu{
display:block;
visibility:visible;
list-style:none;
opacity:1;
top: 108px;
}
ul.menu > li > ul.sub-menu > li > a:hover{
background:#5C5C5C;
color:#fff;
}
ul.menu > li > ul.sub-menu{
visibility:hidden;
position: absolute;
width: 200px;
z-index: 999;
list-style:none;
background: #f9f9f9;
border: 1px solid #e9e9e9;
border-radius: 0 0 5px 5px;
border-bottom: 3px solid #757575;
top:40px;
opacity:0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
ul.menu > li > ul.sub-menu > li > a{
padding: 15px;
display:block;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
border-bottom: 1px solid #efefef;
}