Solutions for CSS based responsive multi-level drop down menus without JS dependencies?

Question

I have been looking at the available responsive drop down menus/navigation bars but nothing seems to be working right. I primarily need a CSS based menu that does not rely on JavaScript hacks.

Why not use JS? JS based solutions fail to work on proxy browsers like Opera Mini, a majority of our audience uses that, and Blackberry browsers don't show work that well with JS.

A lot of people advocate the use of select menus for mobile navigation. An interesting solution, but this is again dependent on JS and is very tedious for nested multi level menus.

So then, what navigation systems have you come across that might work for you?

Answer 1

For the multilevel drop down menu with out java script I create a sample here.

HTML:

<ul>
    <li>
        Menu 1
        <ul>
            <li>Menu 1.1</li>
            <li>
                Menu 1.2
                <ul>
                    <li>Menu 1.2.1</li>
                    <li>
                        Menu 1.2.2
                        <ul>
                            <li>Menu 1.2.2.1</li>
                            <li>Menu 1.2.2.2</li>
                        </ul>
                    </li>
                    <li>Menu 1.2.3</li>
                    <li>Menu 1.2.4</li>
                </ul>
            </li>
            <li>Menu 1.3</li>
        </ul>
    </li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
</ul>​

CSS:

ul{
}
ul li{
    display:inline-block;
    position:relative;
}
ul li> ul{
    display:none;
    position:absolute;
    left:95%;
    top:15px;
}
ul li> ul li{
    display:block;
}
ul li:hover> ul{
    display:block;
}
​

Answer 2

I'm going to say right up front that this solution/pattern is not a drop down solution. But, it is a very cool way to rethink navigation for responsive designs. I don't know the full extent of your navigation needs, either, so this might not be complex enough for you.

Take a look at the Contents Magazine site: http://contentsmagazine.com/

Note the main navigation under the logo. When viewed in a smaller viewport (resize your browser), you will see the 'explore' link. That link, when tapped, gets you to the navigation.

Here's the thing: It's just a simple anchor link.

The pattern is this: In terms of page source order, your navigation is actually towards the bottom of the page. (And, in terms of semantics, this makes a lot of sense to boot.) There is a simple anchor link at the top of the page that jumps to the navigation (which is also an accessibility best practice).

So, thinking mobile-first, the page loads with the navigation at the bottom of the page, but the user can click the anchor link to get to it. As it's an anchor link, the jump is instantaneous, and it actually almost feels like a drop down.

Then, as the viewport gets larger, using just CSS, the navigation is moved (presentationally, anyway) to the top of the page, and positioned under the logo. That is achieved with simple absolute positioning.

Answer 3

You only have one option for a pure-CSS dropdown menu that works with iOS devices: use anchor tags and toggle display: none/block (short article on iOS Safari hover behavior).

HTML:

<ul>
    <li><a href="#">Menu Item 1</a>
         <ul>
             <li>SubLink1.1</li>
             <li>SubLink1.2</li>
             <li>SubLink1.3</li>
             <li>SubLink1.4</li>
         </ul>
    </li>
    <li><a href="#">Menu Item 2</a>
         <ul>
             <li>SubLink2.1</li>
             <li>SubLink2.2</li>
             <li><a href="#">SubMenu3 &gt;&gt;</a>
                 <ul>
                     <li><a href="#">Nested Link 2.3.1 &gt;&gt;</a>
                     <ul>
                         <li>Nested Link 2.3.1.1</li>
                         <li>Nested Link 2.3.1.2</li>
                     </ul>
                     </li>
                     <li>Nested Link 2.3.2</li>
                 </ul>
             </li>
         </ul>
    </li>
    <li><a href="#">Menu Item 3</a>
         <ul>
             <li><a href="#">SubMenu3.1 &gt;&gt;</a>
                 <ul>
                     <li>Nested Link 3.1.1</li>
                     <li>Nested Link 3.1.2</li>
                     <li>Nested Link 3.1.3</li>
                     <li>Nested Link 3.1.4</li>
                     <li>Nested Link 3.1.5</li>
                     <li>Nested Link 3.1.6</li>
                 </ul>
             </li>
             <li>SubMenu3.2</li>
         </ul>
    </li>
</ul>

CSS:

li>ul { display: none; }
li:hover>ul{
    display: block;
}

I have tested this on an iPhone 4 iOS6 and it works fine. Also tested on a Kindle Fire. I don't have access to an android phone for testing, so you want to check those devices.

JS Fiddle: http://jsfiddle.net/aGYnU/2/

Making it responsive:

Play with the styles a bit. Change the positioning. Use em or percentage% values for the dimensions. You may need to use em values for the font-sizes within the menu as well (or media queries to set font-size based on viewport size).

Functionality should continue to work.