Nested CSS dropdown menu

Question

So I've been trying to get this dropdown menu to work properly for past few hours and I'm having no luck.

The HTML is:

<nav>
 <ul id="#sideNavArchive">
  <li><a>Year</a></li>
   <ul>
    <li><a>Month</a></li>
    <li><a>Month</a></li>
   </ul>
  <li><a>Year</a></li>
   <ul>
    <li><a>Month</a></li>
    <li><a>Month</a></li>
   </ul> 
  </ul>
 </nav>

Now, all I'm looking to do is hover of Year and for the months to drop down, but I seem to be running into trouble with the CSS selectors.

The CSS I have at the moment:

ul#sideNavArchive > li{background-color:red; display:block;}
ul#sideNavArchive > ul > li{display:none;}
ul#sideNavArchive > li:hover ul > li{display:block;}

There's obviously something with that bottom piece of css which is causing the issue, if someone could point it out to me that'd be great :)

John Lieb-Bauman · Accepted Answer · 2013-10-04 18:59:28Z

2

In addition to the typo, I think you are looking for something like this:

http://jsfiddle.net/jbaum012/dekYZ/

#sideNavArchive > li{background-color:red; display:block;}
#sideNavArchive > ul > li{display:none;}
#sideNavArchive > li:hover + ul > li{display:block;}

answered Oct 4, 2013 at 18:59

John Lieb-Bauman

1,43612 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

UzumakiDev Over a year ago

Yea sorry about the typos ignore them, but yes that's exactly what I was looking for! Thank you.

kunalbhat · Accepted Answer · 2013-10-04 19:07:21Z

1

You have a typo in your markup. You don't need the # symbol. Change this:

<ul id="#sideNavArchive">..</ul>

to this:

<ul id="sideNavArchive">..</ul>

Working example (UPDATED)

Additionally, you can reduce the specificity of your targeting, and just target the direct descendent ul (sub-menu), rather than specifying each li contained therein:

#sideNavArchive > ul { display: none; }
#sideNavArchive > li:hover + ul { display: block; }

edited Oct 4, 2013 at 19:07

answered Oct 4, 2013 at 18:57

kunalbhat

1,71910 silver badges11 bronze badges

1 Comment

UzumakiDev Over a year ago

Ah yes sorry for the typos, the answer I was looking for was the "+" selector and yes you're right I could just use the ul instead of going down to the li, I just used the css in this case to be more specific in what I was trying to do.

Paulie_D · Accepted Answer · 2013-10-04 19:03:31Z

0

The basic problem was that you were closing the li too early

 <li><a>Year</a>
   <ul>
    <li><a>Month</a></li>
    <li><a>Month</a></li>
   </ul>
</li>

is the proper structure.

JSFIddle

answered Oct 4, 2013 at 19:03

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Comments

PMint · Accepted Answer · 2013-10-04 19:18:01Z

0

HTML:

<ul id="nav">
  <li><a>Year<a>
      <ul>
           <a>Month</a>
           <a>Month</a>
      </ul>
  </li>
  <li><a>Year<a>
      <ul>
           <a>Month</a>
           <a>Month</a>
      </ul>
  </li>
  </ul>

CSS:

#nav{
    list-style:none;
    position:relative;
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
}
#nav ul{
    position:absolute;
    left:-9999px;
}
#nav ul li{
    padding-top:1px;
    float:none;
}
#nav li:hover ul{ 
    top: 10px;
    left:-40px;
}

It's basically done in the #nav ul where left is -9999px; which means out of the screen, by hovering it gets in the screen.

Fiddle

answered Oct 4, 2013 at 19:18

PMint

2463 silver badges13 bronze badges

Collectives™ on Stack Overflow

Nested CSS dropdown menu

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related