Question

我创建了一个带子菜单的菜单，可在此处查看：JSFIDDLE。

我在子菜单上创建了一个三角形，但由于菜单项悬停时显示子菜单，因此会显示不需要的行为。

如果您想点击其中一个子菜单，子菜单将设置为：display:none，因为不再有悬停检测。

我认为这是一个非常简单的解决方案，也许已经有一个关于这个主题的相关问题。但我真的很感激任何帮助。

＆＃13;

*{
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您需要在此处执行的操作基本上是为您的.submenu添加延迟，以便当您从li导航到.submenu时，.submenu是仍然开放。

您可以使用transition属性添加该延迟，如下所示：

.menu nav ul li .submenu {
  transition: all .1s;
}

由于您将使用transition，因此您无法使用display属性，因为它不会反映状态更改。使用visibility和opacity的组合来隐藏和显示display的行为。

参考代码：

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

而不是使用

display: none;

尝试使用

visibility:hidden

display：none表示相关标签根本不会出现在页面上（尽管您仍然可以通过dom与它进行交互）。其他标签之间不会为它分配空间。

visibility：hidden表示与display：none不同，标签不可见，但在页面上为其分配了空间。标记已呈现，只是在页面上看不到。

在stackoverflow上的this问题上找到了这个。我认为这可以解决您无法检测到：悬停事件的问题（因为＆＃39; display：none＆＃39;删除元素）

仅使用css

2 个答案: