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中有很多bug。

1.不要使用position來設置每個元素。

2.你的菜單是由導致問題的按鈕組成的，總是使用unorder list（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」按鈕之間的空白和下拉列表會在下拉菜單中已經關閉之前，你能夠懸停它。