CSS下拉菜单在悬停时不会保持可见状态

Question

我是CSS的新学习者，我对下拉菜单的位置有疑问，不会停留在悬停状态。我已经做了一些测试，我发现问题是左边元素的位置，因为当我有机会左边的值时，下拉停留在悬停上它让它做但它不在它的位置。 我不知道如何解决它，我会感激任何人的帮助。

/* Grid View*/

* {
  box-sizing: border-box;
}


/* Body Size*/

body {
  background-color: white;
  position: relative;
  margin-right: 150px;
  margin-left: 150px;
  margin-top: 20px;
}


/*Header*/

header {
  position: fixed;
  top: 0;
  margin: 80%;
  height: 100px;
  background-color: whitesmoke;
  color: black;
  padding: 10px;
  text-align: center;
}


/* Header <Logo> */

logo {
  position: fixed;
  left: 180px;
  top: 0px;
  width: 250px;
  height: 140px;
}


/* Header < Social Bar>*/

.icon-bar {
  width: 100px;
  overflow: auto;
}


/* Social Icons */

.icon-bar {
  float: right;
  width: 30%;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
  top: 100px;
}

.icon-bar a:hover {
  background-color: yellow;
}


/* Header <Menu>*/

.menu-button1 {
  position: relative;
  left: 300px;
  top: -48px;
  background-color: #47037A;
  border: none;
  color: #cccc00;
  padding: 8px 40px 8px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: Arial;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.menu-button2 {
  position: relative;
  left: 293px;
  top: -48px;
  background-color: #47037A;
  border: none;
  color: #cccc00;
  padding: 8px 40px 8px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: Arial;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.menu-button3 {
  position: relative;
  left: 286px;
  top: -48px;
  background-color: #47037A;
  border: none;
  color: #cccc00;
  padding: 8px 40px 8px 40px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  font-family: Arial;
  margin: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
}


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

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

.dropdown-menu {
  display: none;
  position: absolute;
  top: 0px;
  left: 256px;
  margin: 4px 2px;
  padding: 4px 28px 4px 28px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  font-family: Arial;
  border-radius: 6px;
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-menu a {
  background-color: #cccc00;
  color: #47037A;
  text-decoration: none;
  display: block;
  padding: 4px 28px 4px 28px;
  border-radius: 6px;
  margin-bottom: 1px;
}


/* Change color of dropdown links on hover */

.dropdown-menu a:hover {
  display: block;
  background-color: #47037A;
  color: #cccc00;
  padding: 4px 28px 4px 28px;
  border-radius: 6px;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-menu {
  display: inline-block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .menu-button3 {
  background-color: #cccc00;
}

.menu-button4 {
  position: relative;
  left: 280px;
  top: -48px;
  background-color: #47037A;
  border: none;
  color: #cccc00;
  padding: 8px 40px 8px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: Arial;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.menu-button5 {
  position: relative;
  left: 273px;
  top: -48px;
  background-color: #47037A;
  border: none;
  color: #cccc00;
  padding: 8px 40px 8px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: Arial;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.menu-button6 {
  position: relative;
  left: 266px;
  top: -48px;
  background-color: #47037A;
  border: none;
  color: #cccc00;
  padding: 8px 40px 8px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: Arial;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.menu-button7 {
  position: relative;
  left: 260px;
  top: -48px;
  background-color: #cccc00;
  border: none;
  color: #47037A;
  padding: 8px 40px 8px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: Arial;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.menu-button1:hover {
  background-color: #cccc00;
  color: #47037A;
}

.menu-button2:hover {
  background-color: #cccc00;
  color: #47037A;
}

.dropdown:hover .menu-button3 {
  background-color: #cccc00;
  color: #47037A;
}

.menu-button4:hover {
  background-color: #cccc00;
  color: #47037A;
}

.menu-button5:hover {
  background-color: #cccc00;
  color: #47037A;
}

.menu-button6:hover {
  background-color: #cccc00;
  color: #47037A;
}

.menu-button7:hover {
  background-color: #47037A;
  color: #cccc00;
}

.dropdown-content-menu-button3 {
  display: none;
  position: absolute;
  background-color: #47037A;
  min-width: 160px;
}


/* Line separate header */

.hr-header {
  position: fixed;
  top: 218px;
  height: 3px;
  left: 0px;
  right: 0%;
  background-color: #47037A;
}


/* Content of Body */

.content {
  position: fixed;
  overflow: auto;
  float: left;
  width: 800px;
  margin: 0;
  padding: 10px;
}

h1 {
  color: darkblue;
}

p {
  color: navy;
}

#footer {
  position: fixed;
  left: 0px;
  bottom: 0;
  height: 150px;
  width: 100%;
  color: #47037A;
  background-color: whitesmoke;
  padding: 10px;
  font-family: Arial;
}

.footer-contactus {
  text-align: left;
}

.footer-copyrights {
  text-align: center;
}

.footer-socialm {
  text-align: right;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<div class="header">
  <div>
    <div class="logo">
      <img src="images/logo.jpg" alt="logo" />

      <div class="icon-bar">
        <a class="active" href="#"><i class="fa fa-search"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-youtube"></i></a>
      </div>
      <div>
        <button class="menu-button1">Menu1</button>
        <button class="menu-button2">Menu2</button>
        <!-- dropdown container -->
        <div class="dropdown">
          <!-- trigger button -->
          <button class="menu-button3">Menu3</button>
          <!-- dropdown menu -->
          <div class="dropdown-menu">
            <a href="#item1">Item1</a>
            <a href="#item2">Item2</a>
            <a href="#item3">Item3</a>
            <a href="#item4">Item4</a>
            <a href="#item5">Item5</a>
          </div>
        </div>
        <button class="menu-button4">Menu4</button>
        <button class="menu-button5">Menu5</button>
        <button class="menu-button6">Menu6</button>
        <button class="menu-button7">Menu7</button>
      </div>
    </div>
    <div class="hr-header"></div>
  </div>
  <div class="content">
    Body
  </div>
  <div id="footer">
    <div class="footer-contactus">
      email: phone: address
    </div>
    <div class="footer-copyrights">
      Copyright &copy; website 1
    </div>
    <div class="footer-socialm">

      <div class="icon-bar">
        <a class="active" href="#"><i class="fa fa-search"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-youtube"></i></a>
      </div>
    </div>
  </div>
</div>

Answer 1

  

html结构和css中存在很多错误。

<强> 1。切勿使用位置设置每个元素。

<强> 2。您的菜单由导致问题的按钮组成，始终使用无序列表（ul li）来制作菜单。

第3。有些div没有正确关闭。

<强> 4。无需为重复元素编写css。您可以创建一个公共类并一次又一次地使用它。

  

下面是正确的代码结构和css。还添加了一些动画   你的下拉菜单，所以你现在也可以学习一些新东西：）

/* Grid View*/

* {
  box-sizing: border-box;
}


/* Body Size*/

body {
  background-color: white;
  //position: relative;
  margin-right: 150px;
  margin-left: 150px;
  margin-top: 20px;
}


/*Header*/

header {
  position: fixed;
  top: 0;
  margin: 80%;
  height: 100px;
  background-color: whitesmoke;
  color: black;
  padding: 10px;
  text-align: center;
}


/* Header <Logo>  Fixed- No Need to make it fix positon as parent already fixed*/

.logo {
  float: left;
  max-width: 250px;
}


/* Header < Social Bar>*/

.icon-bar {
  width: 100px;
  overflow: auto;
}


/* Social Icons */

.icon-bar {
  float: right;
  width: 30%;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
  top: 100px;
}

.icon-bar a:hover {
  background-color: yellow;
}


/* Header <Menu>*/

.menu {
  float: left;
  width: 65%;
  padding: 0px;
  margin: 0px;
}

.menu li {
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: Arial;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
}

.menu li a {
  text-decoration: none;
  color: #cccc00;
  padding: 8px 20px;
  display: block;
  border-radius: 6px;
  background-color: #47037A;
}

.menu li a:hover {
  background-color: #cccc00;
  color: #47037A;
}

.dropdown {
  position: absolute;
  top: 37px;
  left: 0px;
  padding: 0px;
  margin: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-2em);
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.dropdown li {
  width: 100%;
  margin: 4px 0;
}

.dropdown li a {
  background-color: #cccc00;
  color: #47037A;
}

.menu li:hover>.dropdown {
  visibility: visible;
  /* shows sub-menu */
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}


/* Line separate header */

.hr-header {
  float: left;
  height: auto;
  background-color: #47037A;
}


/* Content of Body */

.content {
  float: left;
  float: left;
  width: 800px;
  margin: 0 auto;
  padding: 10px;
}

h1 {
  color: darkblue;
}

p {
  color: navy;
}

#footer {
  position: fixed;
  left: 0px;
  bottom: 0;
  height: 150px;
  width: 100%;
  color: #47037A;
  background-color: whitesmoke;
  padding: 10px;
  font-family: Arial;
}

.footer-contactus {
  text-align: left;
}

.footer-copyrights {
  text-align: center;
}

.footer-socialm {
  text-align: right;
}

<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/functions.js" type="text/javascript"></script>



<div class="header">

  <div class="logo">
    <img src="images/logo.jpg" alt="logo" />
  </div>
  <div class="icon-bar">
    <a class="active" href="#"><i class="fa fa-search"></i></a>
    <a href="#"><i class="fa fa-facebook"></i></a>
    <a href="#"><i class="fa fa-instagram"></i></a>
    <a href="#"><i class="fa fa-twitter"></i></a>
    <a href="#"><i class="fa fa-youtube"></i></a>
  </div>

  <ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
      <!---DropDown On hover----->
      <ul class="dropdown">
        <li><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
        <li><a href="#">item 4</a></li>
        <li><a href="#">item 5</a></li>
        <li><a href="#">item 6</a></li>

      </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Menu 7</a></li>
    

  </ul>


  <div class="hr-header"></div>
</div>
<div class="content">
  Body
</div>
<div id="footer">
  <div class="footer-contactus">
    email: phone: address
  </div>
  <div class="footer-copyrights">
    Copyright &copy; website 1
  </div>
  <div class="footer-socialm">

    <div class="icon-bar">
      <a class="active" href="#"><i class="fa fa-search"></i></a>
      <a href="#"><i class="fa fa-facebook"></i></a>
      <a href="#"><i class="fa fa-instagram"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-youtube"></i></a>
    </div>
  </div>
</div>
</div>

Answer 2

.dropdown-menu {
  margin: -4px 2px 4px 2px;
}

只需将.dropdown-menu的上边距更改为负4（只要可以轻松悬停，就可以更多或更少）。

菜单3＆＃39;之间的空白区域。按钮和下拉列表导致下拉菜单已经关闭，然后才能将其悬停。