CODEWITHSUNDEEP
cssdrop-down-menunavigation
Adag89
Adag89

Reputation: 161

Sub-menu displays content on hover over of main menu element

I'm trying to learn to build a drop-down menu for a navigation bar. I want a main element that says Music, then 2 sub menus called Songs, and Albums, then I'd like a list of links(songs, albums) to appear on hover. When I hover over my main element however, all sub content of my elements are also displaying, and I'd like to stop this from happening, until the sub-menu(Albums, or Songs) is hovered over.

I've tried flipping some things around in CSS, tried every combo I can come up with. I'm assuming I'm missing something.

HTML

nav ul ul li li {
  display: none;
  background-color: yellow;
}

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

nav ul ul li {
  display: none;
  background-color: red;
}

nav ul {
  position: relative;
  background-color: pink;
}

nav ul :hover li {
  display: block;
}
<div class="wrapper">
  <nav>
    <ul>
      <li>Music
        <ul>
          <li>Songs
            <ul>
              <li><a href="#"> Blue slide park</a></li>
              <li>Albums
                <ul>
                  <li><a href="#">KIDS</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

****EDIT*****

I fixed my HTML, please just focus on CSS.

Upvotes: 0

Views: 46

Answers (2)

Kushtrim
Kushtrim

Reputation: 1949

You use child combinator > to select the immediate children of the element.

nav > ul ul{
  display: none;
}

nav > ul li:hover > ul{
  display: block;
}
<header>
<H2>My Web Page</H2>
</header>
<body>
<div class="wrapper">
    <nav>
      <ul>
        <li>Music
          <ul>
          <li>Songs
            <ul>
              <li>Blue side parks</li>
              <li>Albums</li>
            </ul>
          </li>          
          </ul>
        </li>
      </ul>
    </nav>
</div>
</body>
</html>

Upvotes: 1

doğukan
doğukan

Reputation: 27521

?

nav ul ul li li {
display: none;
background-color: yellow;
}

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

nav ul ul li {
display: none;
background-color: red;
}  

nav ul {
position: relative;
background-color: pink;
}

nav ul :hover li {
display: block;
}

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

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

nav ul li ul li ul li .x2{
  display:none;
}

.x1:hover .x2{
  display:block;
}
<header>
<H2>My Web Page</H2>
</header>
<body>
<div class="wrapper">
    <nav>
        <ul>
            <li>Music
                <ul>
                    <li>Songs
                        <ul>
                            <li><a 
href="#"> Blue slide park</li>
                    <li class="x1">Albums
                        <ul class="x2">
                            <li><a 
href="#">KIDS</li>
                        </ul>
                    </li>
                        </ul>
                    </li>
                </ul>
                </li>
        </ul>

    </nav>
</div>
</body>

Upvotes: 1

Related Questions