我的问题是，当我将鼠标悬停在隐藏列表所在的区域时，它会显示隐藏列表。我只希望它悬停在下拉菜单上的“语言”链接上时显示隐藏列表。为什么要这样做，这可能是我无法发现的显而易见的事情。
干杯：）
编辑：我已经尝试使用固定高度的#lang_bar。我还需要转换仍然有效。我已经尝试过使用display：none和display：block;但这不起作用所以我使用了可见性。
有什么想法吗？
HTML：
<div id="lang_bar">
<ul>
<li><a href="#"><strong>Language</strong></a>
<ul>
<li><a href ="#"><strong>Maori</strong></a></li>
<li><a href ="#"><strong>Tongan</strong></a></li>
<li><a href ="#"><strong>Chinese</strong></a></li>
<li><a href ="#"><strong>Japanese</strong></a></li>
<li><a href ="#"><strong>Korean</strong></a></li>
</ul>
</ul>
</div>
#lang_bar {
font-family: 'Open Sans', sans-serif;
color: white;
padding-left: 152px;
text-transform: uppercase;
z-index: 40;
position: absolute;
padding-top: 2px;
top: 0;
}
#lang_bar ul ul li a {
padding-top: 3px;
padding-left:5px;
}
#lang_bar ul li ul li a:before {
content: '';
display:block;
right: 0px;
height: 2px;
bottom:117px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.2);
}
#lang_bar ul li ul li a:after {
content: '';
display:block;
right: 1px;
height: 2px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.6);
}
#lang_bar li, #lang_bar li ul {
text-decoration: none;
list-style-type: none;
}
#lang_bar ul {
list-style: none;
padding-left: 0px;
}
#lang_bar ul li {
float: left;
width: 100px;
text-align: left;
line-height: 21px;
}
#lang_bar ul li a {
display: block;
color: #FFF;
background: transparent;
text-decoration: none;
text-align: center;
}
#lang_bar ul li ul {
visibility: hidden;
font-size:12px;
opacity: 0;
}
#lang_bar ul li:hover ul {
opacity: 1;
visibility: visible; /* display the dropdown */
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#lang_bar ul li ul a:hover{
transition-duration: 0.6s;
background-color: rgba(255, 0, 0, 0.23);
}
答案 0 :(得分：1)
我稍微改变了你的css，这是结果
我使用display：none和display：block代替可见性，一切正常。
http://jsfiddle.net/sy3qowxs/5/ enter link description here
这是你的最终CSS：
#lang_bar {
font-family: 'Open Sans', sans-serif;
color: #123111;
padding-left: 152px;
text-transform: uppercase;
z-index: 40;
position: absolute;
padding-top: 2px;
top: 0;
}
#lang_bar a:link{color:#333333;}
#lang_bar ul ul li a {
padding-top: 3px;
padding-left:5px;
}
#lang_bar ul li ul li a:before {
content: '';
display:block;
right: 0px;
height: 2px;
bottom:117px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.2);
}
#lang_bar ul li ul li a:after {
content: '';
display:block;
right: 1px;
height: 2px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.6);
}
#lang_bar li, #lang_bar li ul {
text-decoration: none;
list-style-type: none;
}
#lang_bar ul {
list-style: none;
padding-left: 0px;
}
#lang_bar ul li {
float: left;
width: 100px;
text-align: left;
line-height: 21px;
}
#lang_bar ul li a {
display: block;
color: #FFF;
background: transparent;
text-decoration: none;
text-align: center;
}
#lang_bar ul li ul {
display: none;
font-size:12px;
opacity: 0;
}
#lang_bar ul li:hover ul {
opacity: 1;
display: block; /* display the dropdown */
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#lang_bar ul li ul a:hover{
transition-duration: 0.6s;
background-color: rgba(255, 0, 0, 0.23);
}
答案 1 :(得分：1)
作为display：none解决方案的替代方案，accessibility reasons可以使用position：absolute然后将隐藏元素移出屏幕：
ul li ul {
position:absolute;
top:-1000px;
}
ul li:hover ul {
top:auto;
}
答案 2 :(得分：0)
要添加到上一个答案，当您使用display属性而不是可见性时，这是有效的原因是display会从文档流中删除元素，而其他元素会在其位置重排。另一方面，可见性隐藏了元素，但留下了空白空间，就像它仍然存在一样。因此，当您使用visibility：hidden时，您的列表项看起来只包含文本“Language”和链接，但隐藏的ul仍然存在，并且仍然可以恢复。这就是为什么当你徘徊在列表项目所在的位置时，它会重新出现;从技术上讲，你将鼠标悬停在第一个列表项上，因为子菜单是它的子项。
一般情况下，我使用display：block / display：none来切换隐藏和显示项目，而不是可见性。通常，用例是您希望元素完全隐藏在页面中，并且周围的元素要重排，并且display属性将为您执行此操作。
答案 3 :(得分：0)
如何使用相邻的兄弟组合器：
更改：#lang_bar ul li：hover ul
To：#lang_bar ul li a：hover + ul
答案 4 :(得分：0)
它应该与visibility一起使用，因为它隐藏了元素（如display: none），但没有将其从DOM中删除
以下是一个工作示例：Dropdown Menu
HTML
<ul class="menu">
<li class="menu-item"> <a href="#">Dropdown Menu</a>
<ul class="submenu">
<li class="submenu-item"><a href="#">Link</a></li>
<li class="submenu-item"><a href="#">Link</a></li>
<li class="submenu-item"><a href="#">Link</a></li>
<li class="submenu-item"><a href="#">Link</a></li>
<li class="submenu-item"><a href="#">Link</a></li>
</ul>
</li>
</ul>
CSS
.menu-item {
position: relative;
}
.menu-item:hover .submenu {
visibility: visible;
opacity: 1;
}
.submenu {
position: absolute;
visibility: hidden;
transition: all .2s ease;
opacity: 0;
top: 100%;
}
.submenu-item {
padding: .4em;
}