【发布时间】：2018-08-15 14:53:40
【问题描述】：
我正在尝试制作一个下拉菜单，当您将鼠标悬停在某个项目上时会打开该菜单。但是我有两个问题：
- 当我的鼠标离开项目时，div 消失，所以我希望只要将鼠标悬停在项目或下拉菜单上，div 就会显示出来。
- 这个问题与我相信的第一个问题密切相关。只要您将鼠标悬停在它或下拉菜单上，项目文本就应该保持绿色（目前它只在您悬停项目时才会这样做）。
这是我目前尝试过的代码：
#menu {
float: left;
}
#menu ul.top-menu {
list-style: none;
padding: 0;
}
#menu ul.top-menu li {
display: inline-block;
float: left;
margin: 0 5px;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
#menu ul.top-menu li a {
margin: 0;
padding: 0 5px;
font-weight: 400;
font-size: 18px;
color: black;
display: inline-block;
text-decoration: none !important;
outline: none;
}
#menu ul.top-menu li a:hover {
color: green;
}
#menu ul.top-menu li a:hover + div {
display: block;
}
#menu .sub-container {
display: none;
position: absolute;
top: 32px;
left: -20px;
width: 400px;
background: black;
border-top: 2px solid green;
z-index: 10;
}
#menu .sub-container ul.sub-menu {
padding: 10px;
overflow: hidden;
}
#menu .sub-container ul.sub-menu li {
width: 30%;
float: left;
margin: 0 1.65%;
}
#menu .sub-container ul.sub-menu li:hover {
background-color: green;
color:white;
}
#menu .sub-container ul.sub-menu li a {
color:white;
height: 30px;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 0 10px;
display: block;
border-bottom: none !important;
}<div class="container">
<div id="menu">
<ul class="top-menu">
<li>
<a href="" onclick="return false">Sub Menu 1</a>
<div class='sub-container'>
<ul class='sub-menu'>
<li><a href='#'>Sub Option 1.1</a></li>
<li><a href='#'>Sub Option 1.2</a></li>
<li><a href='#'>Sub Option 1.3</a></li>
<li><a href='#'>Sub Option 1.4</a></li>
<li><a href='#'>Sub Option 1.5</a></li>
<li><a href='#'>Sub Option 1.6</a></li>
<li><a href='#'>Sub Option 1.7</a></li>
<li><a href='#'>Sub Option 1.8</a></li>
<li><a href='#'>Sub Option 1.9</a></li>
</ul>
</div>
</li>
<li>
<a href="" onclick="return false">Sub Menu 2</a>
<div class='sub-container'>
<ul class='sub-menu'>
<li><a href='#'>Sub Option 2.1</a></li>
<li><a href='#'>Sub Option 2.2</a></li>
<li><a href='#'>Sub Option 2.3</a></li>
<li><a href='#'>Sub Option 2.4</a></li>
<li><a href='#'>Sub Option 2.5</a></li>
<li><a href='#'>Sub Option 2.6</a></li>
<li><a href='#'>Sub Option 2.7</a></li>
<li><a href='#'>Sub Option 2.8</a></li>
<li><a href='#'>Sub Option 2.9</a></li>
</ul>
</div>
</li>
<li>
<a href="" onclick="return false">No Sub Menu 1</a>
</li>
<li>
<a href="" onclick="return false">No Sub Menu 2</a>
</li>
</ul>
</div>
</div>感谢您的各种帮助！提前致谢。
【问题讨论】：
-
@mplungjan 我编辑了这个问题，现在它不再是重复的了，请您删除它吗？
-
重新打开。现在可能是其中之一的副本：stackoverflow.com/search?q=%5Bcss%5D+keep+submenu+open