My CSS responsive dropdown menu links not working in the responsive view

Question

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;

}

}

Answer 1

remove , nav:active ul#value from MEDIA 240px css. you the display none is not needed there

here is a fiddle working example here