Css 子菜单显示悬停在主菜单元素上方的内容

我正试图学习为导航栏建立一个下拉菜单。我想要一个显示音乐的主元素，然后是两个名为歌曲和专辑的子菜单，然后我想要一个链接列表（歌曲、专辑）出现在悬停状态。但是，当我将鼠标悬停在我的主元素上时，我元素的所有子内容也会显示出来，我想阻止这种情况发生，直到子菜单（相册或歌曲）悬停在上面

我尝试过在CSS中翻转一些东西，尝试过我能想到的每一个组合。我想我错过了什么

HTML

nav ul li{
显示：无；
背景颜色：黄色；
}
导航ul：悬停li{
显示：块；
}
李国宝{
显示：无；
背景色：红色；
}
导航ul{
位置：相对位置；
背景颜色：粉红色；
}
导航ul：悬停li{
显示：块；
}

音乐

歌曲


相册

nav ul li{
显示：无；
背景颜色：黄色；
}
导航ul：悬停li{
显示：块；
}
李国宝{
显示：无；
背景色：红色；
}  
导航ul{
位置：相对位置；
背景颜色：粉红色；
}
导航ul：悬停li{
显示：块；
}
nav ul li ul li ul{
显示：无；
}
导航ulli：悬停ul{
显示：块；
}
导航ulli.x2{
显示：无；
}
.x1:悬停.x2{
显示：块；
}

我的网页

音乐

歌曲

蓝滑公园
相册

孩子们

nav ul li{
显示：无；
背景颜色：黄色；
}
导航ul：悬停li{
显示：块；
}
李国宝{
显示：无；
背景色：红色；
}  
导航ul{
位置：相对位置；
背景颜色：粉红色；
}
导航ul：悬停li{
显示：块；
}
nav ul li ul li ul{
显示：无；
}
导航ulli：悬停ul{
显示：块；
}
导航ulli.x2{
显示：无；
}
.x1:悬停.x2{
显示：块；
}

我的网页

音乐

歌曲

蓝滑公园
相册

孩子们

使用子组合器

选择元素的直接子元素

nav>ul{
显示：无；
}
导航>ul li：悬停>ul{
显示：块；
}

我的网页

音乐

歌曲

蓝边公园
相册

使用子组合器

选择元素的直接子元素

nav>ul{
显示：无；
}
导航>ul li：悬停>ul{
显示：块；
}

我的网页

音乐

歌曲

蓝边公园
相册