更改了菜单栏的颜色，现在将鼠标悬停在按钮上时不再能看到菜单

Question

我有一个菜单栏，其中包含一个按钮，将鼠标悬停在该按钮上时会显示菜单项列表。

我最近将菜单栏的颜色从纯色更改为具有渐变等的更现代的颜色。

我也将按钮更改为相同的颜色。但是，当我将鼠标悬停在菜单上时，不再显示任何内容。我不明白为什么更改颜色会这样做以及如何再次查看菜单？

这里是my fiddle

新颜色

     /* Dropdown Button */
.dropbtn {
  -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
  -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
   box-shadow:inset 0px 1px 0px 0px #dcecfb;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea));
   background:-moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
   background-color:#bddbfa;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
  }

更改前

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

Answer 1

我认为这与颜色变化无关，可能只是在更新时进行了一些偶然的html代码调整。
我有点困惑，因为有一个外部div似乎什么也不做（没有关联的CSS类），因此我将其删除。完成此操作并在您的html中移动了一个单独的结束</div>标记后，只需对CSS类进行较小的更新即可完成此工作（我将下拉类移到了CSS中，并包含了position:relative ..小事）。

这里是工作代码和一个fiddle

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


/*padding: 6px 5px;*/

.navbar {
  width: 50%;
  display: block;
  margin: 0px;
  padding: 0px;
  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;
}


/* The container <div> - needed to position the dropdown content */

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


/* Dropdown Button */

.dropbtn {
  -moz-box-shadow: inset 0px 1px 0px 0px #dcecfb;
  -webkit-box-shadow: inset 0px 1px 0px 0px #dcecfb;
  box-shadow: inset 0px 1px 0px 0px #dcecfb;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea));
  background: -moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
  background-color: #bddbfa;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropbtnSub {
  background-color: red;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  width: 100%;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: fixed;
  background-color: red;
  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: yellow;
}

.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: yellow;
}

ul {
  padding-left: 0;
}


/*background-color: #9FACEC;    /* Medium blue */

#menu {
  -moz-box-shadow: inset 0px 1px 0px 0px #dcecfb;
  -webkit-box-shadow: inset 0px 1px 0px 0px #dcecfb;
  box-shadow: inset 0px 1px 0px 0px #dcecfb;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea));
  background: -moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
  background-color: #bddbfa;
  position: fixed;
  width: 100%;
  margin: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
  top: 0;
}

.sidebar {
  height: 300px;
  background-color: Red;
  /* Red */
}


/*height: 500px;*/

.content {
  /*background-color: #F5CF8E;    /* Yellow */
  background-color: yellow;
  /* Yellow */
  overflow: hidden;
  max-height: 800px;
}

.page {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  display: block;
}

.headerLbl {
  align-self: center;
  width: 90%;
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 14pt;
  font-family: Arial;
}

<body>

  <div id="menu">

    <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="dropbtnSub">Region</button>
            <div class="dropdown-content-list">
              <ul>
                <li>Japan</li>
                <li>Europe</li>
                <li>USD</li>
              </ul>
            </div>
          </li>
          <li class="dropdown-content-li">
            <button class="dropbtnSub">Export</button>
            <div class="dropdown-content-list">
              <ul>
                <li>Excel</li>
                <li>CSV</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>


    </div>


    <div id="lblContainer" class="headerLbl">
      My label
    </div>


    <div class="page">


    </div>

  </div>



</body>

希望这会有所帮助

Answer 2

使用：hover并给出您可以识别的颜色

 .dropdown:hover{
    write your code here;
    }

Answer 3

<style>
 .dropbtn {
  -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
  -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
   box-shadow:inset 0px 1px 0px 0px #dcecfb;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), 
   color-stop(1, #80b5ea));
   background:-moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
   background-color:#bddbfa;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
  }
  .dropbtn:hover
   {
   -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
  -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
   box-shadow:inset 0px 1px 0px 0px #dcecfb;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9FACEC), 
   color-stop(1, #80b5ea));
   background:-moz-linear-gradient(top, #9FACEC 5%, #80b5ea 100%);
   background:-webkit-linear-gradient(top, #9FACEC 5%, #80b5ea 100%);
   background:-o-linear-gradient(top, #9FACEC 5%, #80b5ea 100%);
   background:-ms-linear-gradient(top, #9FACEC 5%, #80b5ea 100%);
   background:linear-gradient(to bottom, #9FACEC 5%, #80b5ea 100%);
   background-color: #9FACEC;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
  }



<html>
<body>
<input class="dropbtn" type="button" value="button"/>
</body>
</html>

上面的代码有效检查