How to show/hide elements using media query?

Question

By using media query I would like to show the last element of the following list (2) when the screen width is above 768px.

Here is the jsfiddle like.
Here is the basic css code (1).

---

(1)

@media only screen and (min-width: 480px) {
    .menu li.hide{    
        visibility: none;
    }
}

@media only screen and (min-width: 768px) {
    .menu li.hide{    
        visibility: visible;
    }
}

---

(2)

<ul class="menu">
    <li>One</li>
    <li class='hide'>Nine</li>
</ul>​

Answer 1

Try this - DEMO

@media only screen and (max-width: 768px) {
    body{
        background:#030;
    }
    .menu li{    
        font:12px Verdana;    
        width:100px;
        padding-left:10px;
    }
    .menu li:last-child{    
        display: none
    }
}

@media only screen and (min-width: 769px) {
    body{
        background: honeydew;
    }
    .menu li{    
        font:22px Verdana;    
        width:200px;
        padding-left:20px;
    }
}