Question

我的下拉菜单有问题。它工作正常，除了一个细节。当鼠标悬停在第二级下拉菜单假设显示的位置时，即使我没有悬停在第一级，它也会变得可见。

这使得位于下拉菜单下的所有内容都无法访问，因为当我要点击位于其下方的按钮或文本框时，会出现第二级下拉菜单。

我真的无法弄明白

的原因是什么

这是下拉菜单的css样式：

.menu li {
margin:0px;
list-style:none;
font-family:'arial';
}

.menu a {
transition:all linear 0.15s;
color:white;
font-weight: bold;
text-decoration:none;
}



 .menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:14px;
}

.menu > ul > li > a {
padding:6px 15px;
display:inline-block;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#8a96c0;
}

.menu li:hover .subMenue {
z-index:2;
opacity:1;
}

 /*----- Second  Level -----*/
 .subMenue {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:2;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
font-weight:normal;
background:#0e62b8;
}

.subMenue li:hover .subMenue2
{
z-index:2;
opacity:1;
}


 .subMenue li {
display:block;
font-size:14px;

}

.subMenue li a {
padding:3px 15px;
display:block;

 }

.subMenue li a:hover, .subMenue .current-item a {
background:#8a96c0;
}

这是清单：

<ul class="myMenue">
<li><a href="main.php" title="Main Page">HOME</a></li>
<li><a href="#" title="Unit Management"><span>&nbsp;PRODUCT MANAGEMENT&nbsp;</span></a>
    <ul class="subMenue">
       <li><a href="addItem.php" title="Add">Add</a>
       </li>
       <li><a href="delitem.php" title="Delete">Delete</a></li>
       <li><a href="edititem.php" title="Edit">Edit</a></li>
    </ul>
</li>
<li><a href="#" ><span> &nbsp;  REPORTS&nbsp;</span></a>
    <ul class="subMenue">
       <li><a href="time.php" >Time reports</a></li>
       <li><a href="directions.php" >Area repotrs</a></li>
    </ul>
</li>
<li><a href="stories.php" >PLANNING &nbsp;</a>
     <ul class="subMenue">
        <li><a href="#" > Add Set</a></li>
        <li><a href="#" > Edit Set</a></li>
        <li><a href="#" > Delete Set</a></li>
     </ul>

</li>
</ul>

CSS即使没有悬停第一级，也会出现第二级下拉菜单

0 个答案: