CSS3 - Auto collapsing DIV based on media query -

Landscape:

---

Note: I tried to I'm completely through CSS3 without using any javascript / jquery / etc. The solution to the problem should be only in CSS (no script please !!!)

---

The screen layout is a header + 2 column layout is the title of the site in the header, etc. Is set at 25% of the left-hand column width of the screen and a set menu is the right hand column left screen and the page includes "content"

When the width of the screen> 700px , The layout is up (header + 2 columns).

But when the screen width is & lt; 700px, the layout should be changed to a column. Here, order header, then menu and then the content.

The menu contains an extension / collapse action through an expander implementation. What's going to happen is when the screen is> from 700px to

Problem:

The problem is that when I try to push the menu in my media query, the menu never expands since The media is forcing the query to stay put features! Expand / Collapse "Display: None"; Is to set up or delete

The easiest would be to avoid directly set the display properties (solution which I think you with JS - what do you mean with "expander implementation", do not get it) instead, toggle Classname menu, and scope for stepping up a media query for it.

  @ Media only screen and (max-width: 699px) {. Menu.Disabled {display: none; }}