Today I’m going to tell how to create a responsive navigation menu using only CSS3. Why responsive? I think it is important and essential. As you know, today, many people browse the Internet via mobile devices (such as ipad, iphone or android). And it is important that mobile members could navigate through your website. Some solutions which you can find in internet offer you to use jquery or javascript to achieve a necessary behavior. But today I will give you a solution without the use of javascript.

By default, this is usual UL-LI drop-down menu. But, if our screen is small (in case of mobile browsers), this menu turns into a click-based menu. In this case your visitors will be able to click to top elements of menu to open submenus. Please look how it works:

You can notice here one trick – meta with name=’viewport’. This tag is required to scale page content inside your screen properly. At can be any screen – of your monitor or a screen of your mobile device. Rest code should be easy to understand – multilevel UL-LI menu.

Step 2. CSS

Now – styles. In the most beginning I defined base styles for our page:

Well done. Now, the most interesting part – how can we apply responsive rules? Actually, this is easy, we can use media queries (CSS3) which is made to define custom styles for certain screen resolutions (breakpoints). As you know, different mobile devices have different screen resolution, so – we can use it to define our own custom styles. I’m going to turn our dropdown menu into click-action menu using another one simple trick. Did you notice hidden SPAN elements which I put right after top level menu elements? I’m going to pass active state to them (:target pseudo element) by clicking on top level elements, it will open sub-levels then. Please look what I did: