Question

我创建了一个按钮（我们称其为“菜单”按钮），该按钮上有3行符号来表示一个菜单。当用户将鼠标悬停在其上时，将显示一个列表。到目前为止，代码正在执行我想要的操作。它显示了两个按钮，但是当我给每个按钮一个嵌套列表时，显示会变得很有趣。这是我的fiddle so far

我想要的是将菜单按钮悬停在它上面时，它会显示另外两个按钮（或者我想可能只是列表项），一个按钮称为“区域”，一个按钮称为“导出”。当这些鼠标悬停在上方时，我希望它们在自己旁边显示一个列表。

HTML

  <div class="dropdown">
  <button class="dropbtn">
  <div class="navbar">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>
  </button> 
  <div class="dropdown-content">
<ul>
  <li>
      <button class="dropbtn" value="Region">
      <div class="dropdown-content">
        <ul>
          <li>Japan</li>
          <li>South America</li>
          <li>Europe</li>
        </ul>
      </div>
  </li>
  <li>
      <button class="dropbtn" value="Export">
      <div class="dropdown-content">
        <ul>
          <li>Excel</li>
          <li>CSV</li>
        </ul>
      </div>
    </li>
  </ul>
 </div>
 </div>

CSS

  * {
  margin: 0px;
  padding: 0px;
 }

 body {
  background-color: lightblue;
 }

 .navbar {
   width: 50%;
   display: block;
   margin: 50px auto;
   padding: 8px 10px;
   transition: all 0.5s;
  -webkit-transition: all 0.5s;
 }

  .navbar div {
    height: 5px !important;
    background: #fff;
    margin: 7px 0px 7px 0px;
    border-radius: 25px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
  }

  .two {
   width: 35px;
   }

   .three {
   width: 50px;
   }

   .navbar:hover div {
   width: 60px;
   }


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

 .dropbtn {
   background-color: #9FACEC;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
 }

 .dropbtnLi {
    background-color: #9FACEC;
    color: white;
    font-size: 16px;
    border: none;
  }


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

   .dropdown-content li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
   }

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

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

   .dropdown:hover .dropbtn {background-color: #4C66E9;}

Answer 1

悬停时，您需要单独显示它们，即悬停时主按钮，仅显示子按钮。当您将鼠标悬停在子按钮，则可以显示列表。

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: lightblue;
}

/* vertical threline nav bar */

.navbar {
  width: 50%;
  display: block;
  margin: 50px auto;
  padding: 8px 10px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.navbar div {
  height: 5px !important;
  background: #fff;
  margin: 7px 0px 7px 0px;
  border-radius: 25px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.two {
  width: 35px;
}

.three {
  width: 50px;
}

.navbar:hover div {
  width: 60px;
}



.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #9FACEC;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    width: 100%;
}

.dropbtnLi {
    background-color: #9FACEC;
    color: white;
    font-size: 16px;
    border: none;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    position: relative;
}

/* Change color of dropdown links on hover */
.dropdown-content li:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #4C66E9;}

.dropdown-content-list {
  display: none;
}

.dropdown-content-list:hover {
  display: block !important;
}

.dropdown-content-li:hover .dropdown-content-list {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
  background: #efefef;
}

<div class="dropdown">
  <button class="dropbtn">
    <div class="navbar">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
    </div>
  </button> 
  <div class="dropdown-content">
    <ul>
      <li class="dropdown-content-li">
          <button class="dropbtn" value="Region">Country</button>
          <div class="dropdown-content-list">
            <ul>
              <li>Japan</li>
              <li>South America</li>
              <li>Europe</li>
            </ul>
          </div>
      </li>
      <li class="dropdown-content-li">
      <button class="dropbtn">Export</button>
          <div class="dropdown-content-list">
            <ul>
              <li>Excel</li>
              <li>CSV</li>
            </ul>
          </div>
      </li>
    </ul>
  </div>
</div>

Answer 2

这是工作代码。

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: lightblue;
}

/* vertical threline nav bar */

.navbar {
  width: 50%;
  display: block;
  margin: 50px auto;
  padding: 8px 10px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.navbar div {
  height: 5px !important;
  background: #fff;
  margin: 7px 0px 7px 0px;
  border-radius: 25px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.two {
  width: 35px;
}

.three {
  width: 50px;
}

.navbar:hover div {
  width: 60px;
}



.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #9FACEC;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropbtnLi {
    background-color: #9FACEC;
    color: white;
    font-size: 16px;
    border: none;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content li:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover > .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #4C66E9;}

<div class="dropdown">
  <button class="dropbtn">
    <div class="navbar">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
    </div>
  </button> 
  <div class="dropdown-content">
    <ul>
      <li>
          <button class="dropbtn" value="Region">
          <div class="dropdown-content">
            <ul>
              <li>Japan</li>
              <li>South America</li>
              <li>Europe</li>
            </ul>
          </div>
      </li>
      <li>
          <button class="dropbtn">
          <div class="dropdown-content">
            <ul>
              <li>Excel</li>
              <li>CSV</li>
            </ul>
          </div>
      </li>
    </ul>
  </div>
</div>

或者您可以将直接子级设置为在父级li上悬停。像.dropdown:hover > .dropdown-content {display: block;}

带有悬停菜单和嵌套菜单时的列表的菜单按钮

2 个答案: