Html 即使未将鼠标悬停在菜单项上，也会出现下拉菜单

我的下拉子菜单有问题。它工作正常，只是当我将鼠标悬停在菜单下时，会出现下拉子菜单。我已将

z-index

值设置为

-1

并将

不透明度设置为0，但这没有任何好处。下面是CSS的代码

.menu {
float:left;
width:1000px;
margin:0px auto;
}  

.menu li {  
margin:0px;  
list-style:none;  
}  

.menu a {  
transition:all linear 0.15s;  
color:#919191;  
}  

.menu li:hover > a, .menu .current-item > a {  
text-decoration:none;  
color:#be5b70;  
}  

.menu .arrow {  
font-size:11px;  
line-height:0%;  
}  

/*----- Top Level -----*/  
.menu > ul > li {  
float:left;  
display:inline-block;  
border-left: 1px solid rgb(226, 226, 226);  
position:relative;  
font-size:19px;  
}    

.menu > ul > li > a {  
padding:26px 30px;  
display:block;  
text-shadow:0px 1px 0px rgba(0,0,0,0.4);  
font-size: 1.1em;  
}  

.menu > ul > li:hover > a, .menu > ul > .current-item > a {  
background:#2e2728;  
}  
.menu ul li:nth-child(6){  
border-right: 1px solid rgb(226, 226, 226);  
}

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

.menu .arrow {    
font-size:11px;   
line-height:0%;  
}

#navbar{     
position:relative;    
z-index:12;    
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index:-1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #2e2728;
background-color:#FFF;
/*max-height:0;*/

}

.sub-menu li {
display:block;
font-size:16px;
z-index: 101;
}

.sub-menu li a {
padding:10px 30px;
display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}

我使用的代码是

<div id="navbar">
    <nav class="menu">
        <ul class="clearfix">
            <li><a href="index.php">Home</a></li>
            <li><a href="#">Men <span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
            <li><a href="#">OutFitters</a></li>
            <li><a href="#">Levi's</a></li>
            <li><a href="#">StoneAge</a></li>
            <li><a href="#">Zara Men</a></li>
            <li><a href="#">Cougar</a></li>
            </ul>
            </li>
            <li><a href="#">Women <span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
           <li><a href="#">OutFitters</a></li>
           <li><a href="#">EGO</a></li>
           <li><a href="#">Jimmy Choo</a></li>
           <li><a href="#">Origins</a></li>
           <li><a href="#">Stylo</a></li>
            </ul>
            </li>
            <li><a href="#">Kids <span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
            <li><a href="#">OutFitters junior</a></li>
           <li><a href="#">Bubble Gummers</a></li>
           <li><a href="#">Breakout Kids</a></li>
           <li><a href="#">Next Kids</a></li>

            </ul>
            </li>
            <li><a href="aboutt.php">About La-Centro</a></li>


            <li><a href="contact.php">Contact us</a></li>
            <div class="clear"></div>
        </ul>
    </nav>
    </div>

































该代码运行绝对正常

尝试清除Catch并重试


菜单{
浮动：左；
宽度：1000px；
保证金：0px自动；
}  
.menu li{
边际：0px；
列表样式：无；
}  
.菜单a{
过渡：全线性0.15s；
颜色：#919191；
}  
.menu li：悬停>a、.menu.current项>a{
文字装饰：无；
颜色：#be5b70；
}  
.menu.arrow{
字体大小：11px；
线高：0%；
}  
/*-----顶级------*/
.menu>ul>li{
浮动：左；
显示：内联块；
左边框：1px实心rgb（226226226226）；
位置：相对位置；
字号：19px；
}    
.menu>ul>li>a{
填充：26px 30px；
显示：块；
文本阴影：0px 1px 0px rgba（0,0,0,0.4）；
字体大小：1.1米；
}  
.menu>ul>li:悬停>a、.menu>ul>当前项>a{
背景：#2e2728；
}  
.menu ul li:第n个孩子（6）{
右边框：1px实心rgb（226226226226）；
}
.菜单li：悬停.子菜单{
z指数：1；
不透明度：1；
}  
.menu.arrow{
字体大小：11px；
线高：0%；
}
#导航条{
位置：相对位置；
z指数：12；
}
.子菜单{
宽度：160%；
填充：5px0px；
位置：绝对位置；
最高：100%；
左：0px；
z指数：-1；
不透明度：0；
过渡：不透明度线性0.15s；
盒影：0px2p3pRGBA（0,0,0,0.2）；
背景：#2e2728；
背景色：#FFF；
/*最大高度：0*/
}
.子菜单li{
显示：块；
字体大小：16px；
z指数：101；
}
.子菜单LIA{
填充：10px 30px；
显示：块；
}
.子菜单li a：悬停，.子菜单.当前项a{
背景#3e3436；
}
































请阅读此内容