Make nested list element show on mouseover - html

Question

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>Blue Slide Park</li>
<li>What's The Use</li>
<li>Hurt Feelings</li>
<li>Fight The Feeling</li>
</ul>
<li>Albums</li>
<ul>
<li>Blue Slide Park</li>
<li>WMWTSO</li>
<li>GO:OD AM</li>
<li>The Devine Feminine</li>
<li>Swimming</li>
</ul>
</ul>
<li>Videos</li>
<ul>
<li>Objects</li>
<li>Dang!</li>
<li>Weekend</li>
<li>Killin' Time</li>
<li>My Favorite Part</li>
<li>Best Day Ever</li>
</ul>
<li>About</li>
</ul>
</nav>

Answer 1

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>Blue Slide Park</li>
<li>What's The Use</li>
<li>Hurt Feelings</li>
<li>Fight The Feeling</li>
</ul>
</li>
<li>Albums
<ul>
<li>Blue Slide Park</li>
<li>WMWTSO</li>
<li>GO:OD AM</li>
<li>The Devine Feminine</li>
<li>Swimming</li>
</ul>
</li>
</ul>
</li>
<li>Videos
<ul>
<li>Objects</li>
<li>Dang!</li>
<li>Weekend</li>
<li>Killin' Time</li>
<li>My Favorite Part</li>
<li>Best Day Ever</li>
</ul>
</li>
<li>About</li>
</ul>
</nav>
Hope this helps you.