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>

第一个下拉菜单项应以Navbar元素（音乐）为中心。之后的每个子菜单都应显示在顶部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

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

2 个答案: