0

我一直在尝试做一个多级下拉菜单，但是当悬停在第一级项目上时无法显示第二级。当悬停在第一级项目上时，我想显示一些文本。我必须使用<li>标签吗？

这是我到目前为止得到的。在其他地方尝试了<abbr>标签（我希望将这些下拉菜单中的几个放在一起），但这不是我想要实现它的方式，我相信这也不是使用<abbr>标签的正确方式。

<p>在标签下方添加标签<a>并将css添加到它p { display: none; }，然后a:hover p { display: block; }不起作用。

请指教，感谢任何帮助！

@charset "UTF-8";

body {
  background-image: url("images/prism.png");
  color: #fff;
  font-family: sans-serif;
  font-family: Merriweather, sans-serif;
}

h1 {
  margin-left: 10%;
  margin-top: 10%;
}

address {
  float: right;
  margin-right: 10%;
  margin-top: 8%;
}

address a {
  text-decoration: none;
  color: #fff;
}

address a:hover {
  color: #fff;
}

button {
  width: 150px;
  height: 100px;
  border-radius: 10%;
}

.container .row {
  justify-content: space-around;
  margin-top: 10%;
}

.dropbtn {
  background-color: #ddd;
  color: #000;
  padding: 8%;
  font-size: 1.5em;
  border: none;
  margin: 5%;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100%;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
  overflow: auto;
}

.dropdown-content a {
  color: #000;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #333;
  color: #fff;
}

p {
  color: #000;
  padding: 12px 16px;
  display: none;
}

li:hover ul {
  display: block;
}

abbr {
  text-decoration: none !important;
}
<div class="container">
        <div class="row">
          <div class="dropdown">
            <div class="col">
              <button class="dropbtn" type="button" name="button">First-Level-List</button>
              <div class="dropdown-content">
                <a href="#">Item 1</a>
                <a href="#">Item 2</a>
                <a href="#">Item 3</a>
                <a href="#">Item 4</a>
                <a href="#">Item 5</a>
                <a href="#">Item 6</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="dropdown">
        <div class="col">
          <button class="dropbtn" type="button" name="button">Second First-Level-List</button>
          <div class="dropdown-content">
            <a href="#"><abbr title="tooltip1">Item 1</abbr></a>
            <a href="#"><abbr title="tooltip2">Item 2</abbr></a>
            <a href="#"><abbr title="tooltip3">Item 3</abbr></a>
            <a href="#"><abbr title="tooltip4">Item 4</abbr></a>
          </div>
        </div>
      </div>

4

0 回答 0