Question

当您将鼠标悬停在子菜单上时，我的导航菜单无效。

将鼠标悬停在在线付款上时 - ＆gt;杂志正确更新子菜单显示，但一旦我没有在杂志续订上盘旋它仍然显示。

我的问题是，如果没有悬停，我该如何隐藏该子菜单。

这是JSFiddle http://jsfiddle.net/cgzUm/19/

<nav id="nav">
    <div class="inner">          
        <ul id="show_menu">
            <li class="parent"><a href="/contact/">Contact</a> </li>

            <li class="parent" style="background-color: #a61f2e;"><a href="/tagtile/">Online Payments</a>
                <ul class="smallcolumn">
                    <li><a href="/weddings/"><em>&diams;</em> Magazine Renewals</a>
                    <ul class = "submenu">
                            <li><a href="#"><em>&diams;</em>HTML</a></li>
                            <li><a href="#"><em>&diams;</em>CSS</a></li>
                        </ul></li>
                    <li><a href="/weddings-edwardian/"><em>&diams;</em> Other Content</a></li>
                    <li><a href="/weddings-edwardian/"><em>&diams;</em> Content</a></li>
                    <li><a href="/weddings-edwardian/"><em>&diams;</em> Testing </a></li>

                </ul>
            </li>
        </ul>
    </div>
</nav>

CSS

 nav { background: black;  border-top:1px #fff solid; border-bottom:2px #fff solid; }
 nav { background: black;  border-top:1px #fff solid; border-bottom:2px #fff solid; }
 #nav { position:relative; z-index: 999; background: # 000;}
 #nav ul { float: left; margin: 0; padding: 0;  width: 100%;  display: block;  list-   style: none;  border-left:2px #fff solid;  }
 #nav li { float:left;  display: block; position: relative; border-right:2px #fff solid;  }
   /*Text properties for navigation*/
   #nav a {
  color: #fff;
  text-decoration: none;
  width: 100%;
 border-bottom: 1px solid white;
 padding: 0.7em 1em;
  float: left;
  text-align: center;
  border-bottom: 0;
 text-shadow:1px 1px 0px rgba(255,255,255,0.4);

 }
    #nav a:hover { background:#fff; color: #000;  color:rgba(0,0,0,0.7); }
    #nav a.active { background:#c4940e; color:#fff; box-shadow:0px 6px 10px rgba(0,0,0,0.1) inset;}

    #nav li:hover { background:#fff; } 
    #nav li:hover a { color: #000;  color:rgba(0,0,0,0.7); text-shadow:none; }
    #nav ul li ul { display:none; position:absolute; background:#fff; width:440px; top:40px; left:-2px; box-shadow:4px 4px 4px rgba(0,0,0,0.2);  padding:0.6em 0 0.8em 0; /*visibility: hidden;*/ -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        transition: all 0.2s ease; }
    #nav ul li:hover ul { display:block;   /*visibility: visible;*/}
#nav ul li ul li { float:left; width:50%; background:none !important; border:0; color:#eeeedd; }
#nav ul li ul li a { display:inline-block; background:none !important; text- indent:0;   text-align:left; border:0; padding:0.2em 1em;  }
#nav ul li ul li a:hover { opacity:1; } 
#nav ul li ul li:hover { background:none; }


.ie7 #nav ul li:hover ul { left:0; }
 .ie7 #nav ul li ul li a { padding:0.2em 0; text-indent:1em; }

 #nav ul li ul.smallcolumn      { width:220px; }
 #nav ul li ul.smallcolumn li   { width:100%; }
  /*diamond in the menu*/
  #nav i, #nav em { color:#9f2537;  }
 #nav ul li ul li a:hover i,
 #nav ul li ul li a:hover em { color:#011c3a;  }

  /*submenu*/
  #nav ul li ul li:hover ul { top:0;  left:100%; position: absolute; width:100%; background-color: #fff; }

Answer 1

JSFiddle中的第28行显示：菜单中所有UL的块。这也适用于您的子菜单并覆盖其显示：none;

所以将第28行更改为以下内容：

#nav ul li:hover > ul { display:block;   /*visibility: visible;*/}

“＆gt;” 中仅选择作为悬停LI的第一级子级的UL。

Answer 2

第28行（CSS）

#nav ul li:hover > ul { display:block;   /*visibility: visible;*/}

并删除最后一行

#nav ul li ul li ul  {  display:inherit; }

请参阅演示：http://jsfiddle.net/nidzix/cgzUm/29/

不在悬停时隐藏导航上的子菜单

2 个答案: