CODEWITHSUNDEEP
htmlcsshover
Adag89
Adag89

Reputation: 161

Make nested list element show on mouseover

I'm trying to make a collapsible/expandable navigation bar menu. I have the right element targeted, but I can't get it to show the sub-menu on hover-over.

I'd like to keep the HTML as is, and not use any classes if possible, I'd like to learn the basics of doing this without classes, to attain a better understanding of what I'm doing, in manipulating HTML elements. The main point in doing this, is just to get comfortable with accessing elements.

ul {
  list-style: none;
}

ul li a {
  color: white;
  display: none;
}

ul li:hover a {
  display: block;
  background-color: red;
}

ul ul li {
  background-color: pink;
  color: white;
}

ul ul li:hover ul a {
  display: block;
  background-color: purple;
}
<nav>
<ul>
  <li>Music</li>
    <ul>
      <li>Songs</li>
        <ul>
          <li><a href="#">Blue Slide Park</a></li>
          <li><a href="#">What's The Use</a></li>
          <li><a href="#">Hurt Feelings</a></li>
          <li><a href="#">Fight The Feeling</a></li>
        </ul>
      <li>Albums</li>
        <ul>

          <li><a href="#">Blue Slide Park</a></li>
          <li><a href="#">WMWTSO</a></li>
          <li><a href="#">GO:OD AM</a></li>
          <li><a href="#">The Devine Feminine</a></li>
          <li><a href="#">Swimming</a></li>
        </ul>
    </ul>
  <li>Videos</li>
    <ul>
      <li><a href="#">Objects</a></li>
      <li><a href="#">Dang!</a></li>
      <li><a href="#">Weekend</a></li>
      <li><a href="#">Killin' Time</a></li>
      <li><a href="#">My Favorite Part</a></li>
      <li><a href="#">Best Day Ever</a></li>
    </ul>
  <li>About</li>
</ul>
</nav>

Upvotes: 0

Views: 1834

Answers (1)

Chaska
Chaska

Reputation: 3205

Your have a wrong structure of HTML markup.

Also, you should only handle the display of <ul> instead of <a> like this:

nav > ul ul {
  display: none;
}
nav > ul > li:hover > ul,
nav > ul > li > ul > li:hover > ul {
  display: block;
}
<nav>
  <ul>
    <li>Music
      <ul>
        <li>Songs
          <ul>
            <li><a href="#">Blue Slide Park</a></li>
            <li><a href="#">What's The Use</a></li>
            <li><a href="#">Hurt Feelings</a></li>
            <li><a href="#">Fight The Feeling</a></li>
          </ul>
        </li>
        <li>Albums
          <ul>
            <li><a href="#">Blue Slide Park</a></li>
            <li><a href="#">WMWTSO</a></li>
            <li><a href="#">GO:OD AM</a></li>
            <li><a href="#">The Devine Feminine</a></li>
            <li><a href="#">Swimming</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Videos
      <ul>
        <li><a href="#">Objects</a></li>
        <li><a href="#">Dang!</a></li>
        <li><a href="#">Weekend</a></li>
        <li><a href="#">Killin' Time</a></li>
        <li><a href="#">My Favorite Part</a></li>
        <li><a href="#">Best Day Ever</a></li>
      </ul>
    </li>
    <li>About</li>
  </ul>
</nav>

Hope this helps you.

Upvotes: 2

Related Questions