Grow your CSS skills. Land your dream job.

CSS 2 Layer Drop Down Menu-Help

  • # January 10, 2013 at 8:47 am

    Hey guys. I am trying to create a two level drop down navigation menu. I wanted it to appear similar to this, [http://jsfiddle.net/jblasco/XAE9c/](http://jsfiddle.net/jblasco/XAE9c/ “”) , but I was trying to make it on my own. The code below is what I have right now, but I am stuck and I was wondering if someone could help me figure out why it doesn’t work.

    Thanks!!

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



  • Windber TSA
  • Research
  • Blog
  • Contact

# January 10, 2013 at 9:06 am

Aiming for something like this? http://codepen.io/anon/pen/qGzgA

# January 10, 2013 at 11:38 am

@ToxicFire.

Your Pen seems to have two navs with the same ID (which is a no-no) but I understand you have just copied the OP’s code.

http://codepen.io/Paulie-D/pen/pAIdB

I’m not sure what that JS is trying to achieve that can’t be done with CSS.

# January 10, 2013 at 12:33 pm

First off, Thanks for the help!

@ToxicFire

That’s exactly what I am aiming for. Is there a way to make the drop down portion remain active only while navigating through pages inside that section?

@Paulie_D

It did have two navs and that is when I started to realize that I was having a problem.. I am very new at this.

And I am not good with JS. I was trying to learn how to use it a bit and had been following a tutorial.. I do not quite understand the JS yet.

What is the JavaScript in your CodePen doing for that menu bar?

# January 10, 2013 at 5:17 pm

Js basically is just duplicating the css :hover so is redundant.

As for keeping the menu dropped down the code to do that is already in there
you just need to give the section li a class of over on that sections page

# January 11, 2013 at 8:10 am

Thanks for all your help!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".