Comments on: Pure CSS Vertical Menu

By: Greg

Greg — Wed, 01 Feb 2012 23:06:28 +0000

This is a great example and explanation. Thanks for putting this up!

By: Devin R. Olsen

Devin R. Olsen — Mon, 30 Jan 2012 19:28:01 +0000

@Ruth, sounds like the parent li container for your sub-level menu items was not given a position relative. This will prevent the sub-level menu (who is set to position absolute) from breaking out of the flow of design all the way up to the body, but rather breaks it from the flow of design up to it’s immediate parent container.

You might also need to specify a fixed width for your sub-level ul menu container.

Hope this helps.

By: Ruth

Ruth — Sun, 29 Jan 2012 19:10:25 +0000

Hello Devin,

I’m very new to this and following your instructions down to:

The next thing we want to setup, is our sub-level list items styles:

For some reason as you can see from the URL (well it is on my IE9) my sub-level is spread across the page on one line.

By: Jay M. Kusombi

Jay M. Kusombi — Thu, 26 Jan 2012 15:56:14 +0000

Very thorough, well done sir.

By: Spandan Sarkar

Spandan Sarkar — Sat, 21 Jan 2012 05:49:41 +0000

It was great to learn from you……..I have implemented it in my website. Thank you so much……your hard work is helping a lot of people….thanks again…

By: Andrew Bellamy | pure css vertical menu

Andrew Bellamy | pure css vertical menu — Sat, 21 Jan 2012 01:40:33 +0000

[...] on Pure CSS Vertical Menu by Devin R. [...]

By: Jonathan

Jonathan — Fri, 20 Jan 2012 18:46:30 +0000

Thank you. I banged my head on this for days before finding this tutorial. Even then I had a problem, but it was because I used the csshover3.htc, not the csshoverfix.htc. Oops. It’s all in the details. Thanks again.

By: Jackie

Jackie — Wed, 18 Jan 2012 17:11:29 +0000

Hi –

Thank you for this great tutorial and also the horizontal menu, as well. I have tried them both out. I am looking for a way to adapt this to mobile devices. I am trying to learn how to create navigation for mobile phones and tablets, etc. I am taking a class in mobile web design, but they assume you know CSS already. Do you have any suggestions for making the CSS adaptable to the smaller screen sizes? If not, I will just try to see if I can make it work. I am wondering one other thing – can the menu be centered in a layout? It defaults to the left on my screen. Thank you so much!

By: 35 Amazingly Great CSS Menu Tutorials | Web Design Core

35 Amazingly Great CSS Menu Tutorials | Web Design Core — Thu, 12 Jan 2012 15:19:43 +0000

[...] Pure CSS Vertical Menu [...]

By: TD

TD — Wed, 04 Jan 2012 16:45:06 +0000

I was wondering how do you cope with items that are multi-line? I mean everything works, the sub items holder will show up, but with an Y position offset. When I was working with static sites it was as easy as adding a class to that item, but in a CMS it’s kinda awkward, do you have a solution?
Example: If “About” was “About me and my {br-newline} awesome company”…the sub items holder would appear at the same height than “awesome company”…
Anyways, thanks to anyone who tries to help ;)

By: kirti

kirti — Tue, 03 Jan 2012 11:21:10 +0000

Thanks a lot. Such an easy to understand and good work. I was puzzled as I get may references but not a single reference work in my coding other than yours.
I got the point from where my coding not showing the exact result but i want to understand the effect of each coding line.

In my coding i declare position:relative in top_level li and in your coding it is in sub_level.

How this coding works?

By: Christian

Christian — Thu, 29 Dec 2011 03:33:18 +0000

A modified version of your vertical menu works just fine with a .html page. However, using the same CSS style with a .aspx page fails. With .html, hovering over the 3rd level is working fine. With .aspx, attempting the same action causes the 3rd level to disappear from view. In practical terms, this prevents you from selecting anything from the 3rd level. The DOCTYPE declarations are identical. Any suggestions?

PS: I am in the process of upgrading the above website from Frontpage 2003 and Visual Studio 2003 .NET to Expression Web 4 and Visual Web Developer 2010 Express.

Thanks.