Comments on: Pure CSS Vertical Menu

By: Subbu

Subbu — Thu, 02 Sep 2010 19:12:18 +0000

Good work Devin.. Looks like you have knack for explaining things in a simplistic manner!! Keep up the work.

I am looking for a pure css vertical menu which is expandle ie levels expanding rather than poping out.

By: IslandJim

IslandJim — Wed, 01 Sep 2010 02:15:23 +0000

Excellent tut man! sorted me out in no time =)

By: ias

ias — Mon, 23 Aug 2010 21:36:13 +0000

good work

By: Ban-Kai

Ban-Kai — Mon, 09 Aug 2010 20:52:44 +0000

OMG! thank you!

By: Devin R. Olsen

Devin R. Olsen — Tue, 03 Aug 2010 05:01:33 +0000

@Pardeep kumar Dhiman – I think you are saying that the content is being displayed over your menus when they pop out?

If this is the case, it sounds like you might need to set your menus absolute parent element to have a z-index higher than that of your contents parent element.. I would need a link to further help you.

By: Pardeep kumar Dhiman

Pardeep kumar Dhiman — Sun, 01 Aug 2010 15:18:41 +0000

Respected Sir
Thank U very Much For This Tutorial.
I am facing a problem.In Home page of my Web Site in Left 25% area is vertical menus and in the rest of the area i have content panel for Content .When I hover the First Level Menu Then Its Child Went Upon the Content in the Content Panel and The content Panel Content is Displayed Inseted of the Menu Heading. Suggest Solution early

By: Annie

Annie — Fri, 30 Jul 2010 22:23:12 +0000

Thanks so much! This works perfectly and with little effort. It is just what I needed.

By: Mazhar Sheikh

Mazhar Sheikh — Mon, 26 Jul 2010 12:37:52 +0000

Great Tips…. Thanks

By: Devin R. Olsen

Devin R. Olsen — Tue, 20 Jul 2010 19:27:12 +0000

@Kevin – With out an example link of what you are working on this is hard to visualize. However I see the word “click-able”, and right off the bat this tells me that you are looking for a JavaScript method to display or hide sub menus, not CSS.

Hover = CSS selector and is equivalent to JavaScript mouse over event.
Click = JavaScript Event and not CSS at all.

Also note, that Java and JavaScript are two different things. JavaScript is a client side language and does not rely on web servers support.

By: Kevin

Kevin — Tue, 20 Jul 2010 10:10:50 +0000

Hello Devin,

Your code works perfectly! I have adapted it a little bit. The menu expands directly under the headermenu. i.e. menu 1 items show directly under menu 1, in the space between menu 1 and 2. The only problem I’m facing now is that I need to make the whole area of a button clickable to make sure they stay focused.

Example, mouse pointer stands on menu 1, menu 1 extends, I want to hover to menu 4 but the second menu 1 loses focus it collapses and I need to move the mouse up to view menu 4. This is annoying for visitors.

Can you think with me and come up with a solution? I’ve tried to turn my headermenu’s into a href but that doesn’t solve it, since the a href doens’t cover the whole headermenu area which is clickable.

(Java isn’t a solution since my server doesn’t support it)

By: Devin R. Olsen

Devin R. Olsen — Fri, 09 Jul 2010 04:22:54 +0000

@shaila – I would need more information about what you mean by linking. Do you mean you are having a problem adding YOUR LINK TEXT link to your menu items?

By: Devin R. Olsen

Devin R. Olsen — Fri, 09 Jul 2010 04:21:39 +0000

@Stephen & @Mike – Yes I can, http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/

This will show you how to have an infinite amount of sub menus with very lightweight pure CSS!