0

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

0

4 Answers 4

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;}
Sign up to request clarification or add additional context in comments.

1 Comment

Yea sorry about the typos ignore them, but yes that's exactly what I was looking for! Thank you.
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; }

1 Comment

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.
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

Comments

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.