我的网站标题如下所示:
.header-cont {
width:100%;
position:fixed;
top:0px;
}
.header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:950px;
margin:0px auto;
}
.header-button {
background: #73e3eb;
background-image: -webkit-linear-gradient(top, #73e3eb, #5ec9d1);
background-image: -moz-linear-gradient(top, #73e3eb, #5ec9d1);
background-image: -ms-linear-gradient(top, #73e3eb, #5ec9d1);
background-image: -o-linear-gradient(top, #73e3eb, #5ec9d1);
background-image: linear-gradient(to bottom, #73e3eb, #5ec9d1);
-webkit-border-radius: 13;
-moz-border-radius: 13;
border-radius: 13px;
font-family: Lora;
color: #6293ad;
font-size: 20px;
padding: 20px 15px 10px 15px;
text-decoration: none;
}
.clearfix:after {
display:block;
clear:both;
}
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#919191;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#be5b70;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#2e2728;
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:150px;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}
<html>
<head></head>
<body>
<div class="header-cont">
<div class="header">
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item"><a href="#">Home</a></li>
<li><a href="#"><span class="arrow">▼</span>Sites</a>
<ul class="sub-menu">
<li><a href="#">Site A</a></li>
<li><a href="#">Site B</a></li>
<li><a href="#">Site C</a></li>
<li><a href="#">Site D</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
抱歉，代码很长，但就是这样。我的问题是，当您将鼠标悬停在“站点”项下方的区域时，会显示作为下拉列表的 div。我想更改它，以便它仅在您将鼠标悬停在“网站”上时显示，但我不确定如何更改。有人知道吗？
最佳答案
您应该使用 visibility 属性，而不是使用 opacity 属性。 opacity 属性只是让元素透明。 visibility 属性完全隐藏元素，但在文档的正常流中保持元素的间距。
.menu li:hover .sub-menu {
visibility: visible;
}
.sub-menu {
width:150px;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
visibility: hidden;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
您也不需要 z-index 属性。
或者，您也可以使用 display: none; 和 display: block;，这与 visibility 属性的作用相同, 除了它不保持文档正常流中的间距。
关于html - 如何在悬停时隐藏div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27585232/