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

Stavros Sofroniadis
PLUS
Stavros Sofroniadis
Courses Plus Student 1,503 Points
Posted by Stavros Sofroniadis
Stavros Sofroniadis
Courses Plus Student 1,503 Points

Assistance for Horizontal drop-down menu

Dear Friends,

have created a horizontal drop-down menu but doesntt work the dropdown menu when move your mouse over the link.

If you could assist,

Thank You

2 Answers

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points

You have a rule here that's targeting <a> elements in a hover state inside the <li>. 

nav ul li a:hover{
  background-color: #0c97e2;
  position: absolute;
  visibility: visible;
  float:left;
}

The element that you need to show for the dropdown is the <ul> element that is a sibling of this <a> element:

<li>
  <a href="#">Services</a>
  <ul class="">
    <li><a href="#">Pilate</a></li>
    <li><a href="#">Yoga</a></li>
    <li><a href="#">Thai Massage</a></li>
    <li><a href="#">Reiki</a></li>
    <li><a href="#">Refrexeology</a></li>
  </ul>
</li>

(FYI you were missing a closing </li> tag here, I added it in, but it didn't affect anything).

So in order to change the visibility of this <ul>, I recommend not targeting the <a> element that is its sibling, and instead targeting the <li> element that is the parent of both:

nav ul li {
  position: relative;
}

nav ul li ul {
  position: absolute;
  display: none;
}

nav ul li:hover ul {
  display: block;
}

nav ul li a:hover {
  background-color: #0c97e2;
}

/*
nav ul li a:hover{
  background-color: #0c97e2;
  position: absolute;
  visibility: visible;
  float:left;
}
*/

What I'm doing here is:

  • 1st rule is saying that this <li> element has position: relative. This means that if any of it's children are position: absolute, it will be relative to this <li> element, not relative to something else or relative to the window.
  • 2nd rule is saying that the <ul> inside of this <li> has position: absolute, and will be not displayed by default
  • 3rd rule says,, when someone is hovering over the <li>, the <ul> inside it will be displayed.
  • 4th rule is making sure the background color of the <a> still changes. But we don't need those other rules anymore since we're taking care of changing the visibility in a different way.

It's not perfect yet but I think this will move you forward with getting the dropdown to show. Here's my snapshot with these changes: https://w.trhou.se/6vn6wp1kzi