html - 即使没有悬停在菜单项上也会出现下拉菜单

Question

我的下拉子菜单有问题。它工作正常，除了当我将鼠标悬停在菜单下方时会出现下拉子菜单。我已将 z-index 值设置为 -1 并将 opacity 设置为 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>

Answer 1

代码工作得很好。

尝试清除 Catche 并重试。

.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;
}

<link rel="stylesheet" href="styles.css" type="text/css" />

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