CODEWITHSUNDEEP
htmlcss
UzumakiDev
UzumakiDev

Reputation: 1276

Nested CSS dropdown menu

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 :)

Upvotes: 0

Views: 4232

Answers (4)

PMint
PMint

Reputation: 246

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

Upvotes: 0

kunalbhat
kunalbhat

Reputation: 1719

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; }

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115372

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

Upvotes: 0

John Lieb-Bauman
John Lieb-Bauman

Reputation: 1436

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;}

Upvotes: 2

Related Questions