Bummer! You have been redirected as the page you requested could not be found.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by troy beckett
troy beckett
12,035 Points

css drop down

Take a look at my code pen:

http://codepen.io/tbeckett24/pen/wByZKa

can anyone tell me why I cant actually get my cursor on the submenu before it disappears. If my code is just wrong let me know I won't be offended at all haha

2 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

Here is a codepen I have where I have a dropdown menu on recipes.

The nested list has a property of left: -999em which makes it not be seen until you hover. Once you hover the value of left changes to auto, and the dropdown stays open when you move your mouse over it. I think something like this should help you.

This is the css that affects the dropdown list. 

.nested {
  width: 10.65em;
  position: absolute;
  left: -999em;
}

nav li:hover ul {
  left: auto;
}

.nested a {
  width: 100%;
  display: block;
  padding: 0 4em;  
}
Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

I changed the following code on your pen: http://codepen.io/Jesusz0r/pen/yyvrMX

#main-menu > li:hover > a + .sub-menu {
  display: block;
}

Added hover on the list item instead of the anchor
And also removed the 82px top position of the sub menu