I have implemented a custom drop-down navigation bar that is responsive to screens above 480 px in width. I have included a hidden menu icon for screens below 480 px, which when clicked should display the navigation bar along with the drop-down list. However, I am facing an issue where the drop-down list does not display after clicking the icon on screens below 480 px. My implementation is based on HTML5 and CSS3.
/*Styles the background-color of an active link*/
.menu ul .active{
color: #ffffff;
background: #red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red 20%, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red 20%, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 20%, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red 20%, green); /* Standard syntax */
background: linear-gradient(red 20%, green); /* Standard syntax */
}
.navbar{
width:100%;
max-width:1000px;
text-align:center;
margin-top:-8px;
margin-bottom:60px;
margin-left:160px;
}
.menu ul{
/*Removes bullets*/
list-style:none;
}
/*Styles each list within ul*/
.menu ul li{
background-color:green;
border:1px solid #ffffff;
width:100%;
max-width:173px;
height:35px;
line-height:35px;
margin:auto;
text-align:center;
/*Makes the list dispaly in a horizontal maneer*/
float:left;
position: relative;
border-radius:8px;
font: 15px;
font-weight:regular;
}
.menu ul li a{
text-decoration:none;
color:white;
display:block;
}
.menu ul li a:hover{
background-color:red;
border-radius:8px;
}
.menu ul ul{
position:absolute;
...
</body>
</html>