我创建了一个带子菜单的菜单，可在此处查看：JSFIDDLE。
我在子菜单上创建了一个三角形，但由于菜单项悬停时显示子菜单，因此会显示不需要的行为。
如果您想点击其中一个子菜单，子菜单将设置为：display:none，因为不再有悬停检测。
我认为这是一个非常简单的解决方案，也许已经有一个关于这个主题的相关问题。但我真的很感激任何帮助。
*{
margin:0;
padding:0;
}
.menu nav{
text-align:center;
}
.menu nav ul{
list-style-type:none;
}
.menu nav ul li{
display:inline-block;
padding:80px 15px 0px 15px;
font-family: Titillium Web;
font-weight:700;
font-size:16px;
color:#00adef;
text-transform: uppercase;
}
.menu nav ul li a{
color:#00adef;
}
.menu nav ul li:hover{
border-bottom:4px solid #00adef;
}
.menu nav ul li .submenu{
display:none;
position: absolute;
background-color:#1A98C8;
margin-top:15px;
z-index:10;
opacity:0.9;
left:38%;
}
.menu nav ul li .submenu:before{
content: '';
position: absolute;
left: 75px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #1A98C8;
}
.menu nav ul li .submenu li{
color:#fff;
display:block;
padding-top:0px;
padding-left:0px;
height:40px;
border-bottom:1px solid #fff;
opacity:1;
line-height:40px;
width:150px;
}
.menu nav ul li:hover .submenu{
display:block;
}<div class="menu">
<nav>
<ul class="default-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">about</a></li>
<li>
submenu <i class="fa fa-angle-right" aria-hidden="true"></i>
<ul class="submenu">
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
答案 0 :(得分：1)
您需要在此处执行的操作基本上是为您的.submenu添加延迟，以便当您从li导航到.submenu时，.submenu是仍然开放。
您可以使用transition属性添加该延迟，如下所示：
.menu nav ul li .submenu {
transition: all .1s;
}
由于您将使用transition，因此您无法使用display属性，因为它不会反映状态更改。使用visibility和opacity的组合来隐藏和显示display的行为。
参考代码：
* {
margin: 0;
padding: 0;
}
.menu nav {
text-align: center;
}
.menu nav ul {
list-style-type: none;
}
.menu nav ul li {
display: inline-block;
padding: 80px 15px 0px 15px;
font-family: Titillium Web;
font-weight: 700;
font-size: 16px;
color: #00adef;
text-transform: uppercase;
}
.menu nav ul li a {
color: #00adef;
}
.menu nav ul li:hover {
border-bottom: 4px solid #00adef;
}
.menu nav ul li .submenu {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #1A98C8;
margin-top: 15px;
z-index: 10;
opacity: 0.9;
left: 38%;
transition: all .1s;
}
.menu nav ul li .submenu:before {
content: '';
position: absolute;
left: 75px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #1A98C8;
}
.menu nav ul li .submenu li {
color: #fff;
display: block;
padding-top: 0px;
padding-left: 0px;
height: 40px;
border-bottom: 1px solid #fff;
opacity: 1;
line-height: 40px;
width: 150px;
}
.menu nav ul li:hover .submenu {
visibility: visible;
opacity: 1;
}<div class="menu">
<nav>
<ul class="default-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">about</a></li>
<li>
submenu <i class="fa fa-angle-right" aria-hidden="true"></i>
<ul class="submenu">
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
答案 1 :(得分：1)
而不是使用
display: none;
尝试使用
visibility:hidden
display：none表示相关标签根本不会出现在页面上（尽管您仍然可以通过dom与它进行交互）。其他标签之间不会为它分配空间。
visibility：hidden表示与display：none不同，标签不可见，但在页面上为其分配了空间。标记已呈现，只是在页面上看不到。
在stackoverflow上的this问题上找到了这个。我认为这可以解决您无法检测到：悬停事件的问题（因为＆＃39; display：none＆＃39;删除元素）