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> */
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 © 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>
2 个答案:
答案 0 :(得分：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 © 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>
答案 1 :(得分：-1)
.dropdown-menu {
margin: -4px 2px 4px 2px;
}
只需将.dropdown-menu的上边距更改为负4（只要可以轻松悬停，就可以更多或更少）。
菜单3＆＃39;之间的空白区域。按钮和下拉列表导致下拉菜单已经关闭，然后才能将其悬停。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？