悬停时显示子菜单内容的下拉菜单

Question

我一直在想办法制作带有下拉菜单的导航栏。我觉得我非常接近，但出于某种原因，当我将鼠标悬停在我的主列表元素上时，它也显示了子菜单的全部内容。

这是我一直卡住的地方，我尝试在我的 CSS 中添加、切换 li 和 ul，但它就是不起作用。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
  font-family: Arial, Helvetica, san-serif;
}

body {
  background-color: pink;
}

h1 {
  text-align: center;
  margin: auto;
  padding-top: .4em;
  background-color: coral;
  height: 2em;
  width: 100%;
}

nav {
  background: red;
  margin: auto;
  padding: 10px;
  line-height: 1.6em;
  width: 100%;
}

nav>ul>li {
  position: relative;
  text-align: center;
  color: yellow;
  background-color: purple;
  width: 31%;
  height: auto;
}

nav>ul>li>ul {
  background-color: blue;
  list-style: none;
  position: absolute;
  /*display: none;*/
  width: 100%;
}

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

nav>ul>li>ul>li>ul {
  list-style: none;
  background-color: black;
  position: absolute;
  left: 100%;
  top: 0px;
  width: 40%;
  display: none;
}

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

<!DOCTYPE html>
<html>

<head>
  <title>Web Page</title>
  <link rel="stylesheet" type="text/css" href="C:\Users\geek\Desktop\positions\styles.css">
</head>
<header>
  <H1>My Web Page</H1>
</header>

<body>
  <div class="wrapper">
    <nav>
      <ul>
        <li>Music
          <ul>
            <li>Song 1
              <ul>
                <li>Thing 1
                </li>
                <li>Thing 2
                </li>
                <li>Thing 3
                </li>
                <li>Thing 4
                </li>
                <li>Thing 5
                </li>
                <li>Thing 6
                </li>

              </ul>
            </li>
            <li>Song 2</li>
            <li>Song 3</li>
            <li>Song 4</li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

</body>

</html>

第一个下拉项应以导航栏元素（音乐）为中心。之后的每个子菜单都应该出现在顶部 0px；剩下 100% 的列表项（在本例中为歌曲 1）。你可以在我的CSS.

中看到预期的结果

Answer 1

* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}

body {
background-color: pink;
}

h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height:2em;
width: 100%;
} 

nav {
background: red;
margin: auto;
padding:10px;
line-height: 1.6em;
width: 100%;
}

nav > ul >li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}  

/* i added only following codes */

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

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

<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css" 
href="C:\Users\geek\Desktop\positions\styles.css">

</head>
<header>
<H1>My Web Page</H1>
</header>
<body>
<div class="wrapper">
    <nav>
        <ul>
            <li>Music
                <ul>
                    <li>Song 1
                        <ul>
                            <li>Thing 
1</li>
                            <li>Thing 
2</li>
                            <li>Thing 
3</li>
                            <li>Thing 
4</li>
                            <li>Thing 
5</li>
                            <li>Thing 
6</li>

                        </ul>
                    </li>
                    <li>Song 2</li>
                    <li>Song 3</li>
                    <li>Song 4</li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

</body>
</html>

Answer 2

您尝试实现的一个非常相似的示例，在本例中是单击，但您可以在 :hover

上了解如何执行此操作

https://codepen.io/Angel-SG/pen/JwXRZo

悬停时显示子菜单内容的下拉菜单

Drop-down menu showing contents of sub menu, on hover

html

css

css-position

navigationbar