How to revert nav menu to unordered list view when resizing window?

Question

I've been assigned to design a nav menu using CSS.
I've designed it accordingly, but I didn't find help regarding how to revert the menu back to its unordered list view when the browser window becomes too small to fit the menu.
I can't use scripting, only pure CSS.
Any suggestions?

---

The HTML code is as following:

        <nav class="line">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Articles</a>
                    <ul>
                        <li><a href="#">Things</a></li>
                        <li><a href="#">Stuff</a></li>
                        <li><a href="#">Subjects</a>
                            <ul>
                                <li><a href="#">Serious subjects</a></li>
                                <li><a href="#">Frivolous subjects</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Solving homework</a>
                    <ul>
                        <li><a href="#">Not here</a></li>
                        <li><a href="#">Not here either</a></li>
                    </ul>
                </li>
                <li><a href="#">Inspiration</a></li>
            </ul>
        </nav>

Answer 1

What you are trying to do is a responsive page. That is also called the 'mobile first grid system' because you make it fit the small screen first, then you only add new elements to the classes in media queries as you move to bigger screens.

This should get you started: http://css-tricks.com/resolution-specific-stylesheets/ http://css-tricks.com/css-media-queries/

And just google around the subject of 'media queries' and 'responsive web page' and you should find all the info you need.

Good luck!

Answer 2

Try to use media queries.
For example:
@media (max-width:400px) { ul li ul { display:none; } }

Answer 3

You can use media queries for this.