I am failry new to the whole responsive web design field. I have managed to create a CSS based menu from a template I have found, the UL works well in its linear form but minute it moves to drop form @media 480px and below, the hover side works but the actual links do not.
HTML
enter code here
<nav>
a href="#" id="menu-icon"><span>Menu</span></a>
<ul id="value">
<li id="valueli"><a href="#hello">WELCOME</a></li>
<li id="valueli"><a href="http://www.valueportfolio.co.za"
target="_blank">ABOUT US</a></li>
<li id="valueli"><a href="#methodology">METHODOLOGY</a></li>
<li id="valueli"><a href="#interaction">GUIDANCE</a></li>
<li id="valueli"><a href="#services">SERVICES</a></li>
<li id="valueli"><a href="#team">OUR TEAM</a></li>
<li id="valueli"><a href="#contact">TALK TO US</a></li>
</ul>
</nav>
Below the CSS code: 1) Before @media. 2) @media 240px for example.
BEFORE @MEDIA
enter code here
a { text-decoration: none; }
a:hover { color: transparent; }
#nav-wrap {
margin-top: 20px;
}
nav { width: 1000px; height: 20px; float: left; }
#menu-icon {
display: none;
width: 25px;
height: 25px;
margin-left: 10px;
background: url( images/value_images/menu_png.png) center no-repeat;
}
a:hover#menu-icon {
background-color: transparent;
border-radius: 0 0 0 0;
}
#menu-icon span { display: none;
float: left;
margin-left: 50px;
padding-top: 3px;
width: 115px;
position: absolute;
font-family:"Verdana", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
ul#value { list-style-type: none; display:block; width: 100%; margin: 0; padding: 0;}
li#valueli {font-family: "Verdana", Arial, Helvetica, sans-serif; font-size:12px;
font-weight: normal;
text-decoration: none;
padding-left: auto;
padding-right: auto;
display: inline-block;
line-height: 20px;
float: left;
text-align: center;
height: 20px;
width: 14.2%;
padding-start: 0;
-moz-padding-start: 0;
-webkit-padding-start: 0;
-o-padding-start: 0;
margin: 0;
}
li#valueli a {color: #000; }
li#valueli a:hover { color: #fa7b27; }
AT MEDIA 240px
@media screen and ( min-width: 240px ) and ( max-width: 319px ) {
#menu-icon {
display:inline-block;
}
#menu-icon span { display: inline-block;
float: left;
margin-left: 35px;
padding-top: 3px;
width: 115px;
position: absolute;
font-family:"Verdana", Arial, Helvetica,
sans-serif;
font-size: 12px;
color: #000;
}
nav { width: 100%; height: 25px; float: right; background: #ffffff; margin-left:
-1px; }
nav:hover ul#value {
display: inline-block;
list-style: none; width: 100%; margin: 0 auto;
}
nav ul#value {
display: none;
overflow: hidden;
position: relative;
top: 0;
left: 0;
float: left;
padding: 5px;
background: #fff;
width: 100%;
}
nav ul#value, nav:active ul#value {
display: none;
overflow: hidden;
position: relative;
top: 0;
left: 0;
float: left;
padding: 5px;
background: #fff;
width: 100%;
}
nav li#valueli { font-family:"Verdana", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight: normal;
text-decoration: none;
display: inline-block;
text-align: left;
border-bottom: #808080 1px dotted;
width: 100%;
height: 30px;
margin: 0;
padding: 3px;
}
}
remove , nav:active ul#value from MEDIA 240px css. you the display none is not needed there
here is a fiddle working example here