Navigation Menu

In this example, we use CSS to style the list horizontally, to create a navigation menu:

Can you use the @media query to make it so that when this page is seen from a phone (or small device less than 400px wide) the items don't float next to each other but stack, one per line (in other words, "Home" then a break, then "News" on the next line, etc)?

like this:
menu items stacked one per line