Question

我有一个垂直菜单，从0不透明度转换为1就好了。一切正常，除非我将鼠标悬停在第二级li ul上，我可以看到上一级的列表项，但无法点击它们。当我将光标从最后li移到上一级li时，ul关闭，上一级列表向上移动。

<div class="accordion">
    <ul>
        <li>My First List Item</li>
        <li>My Second List Item
            <ul>
                <li><a href="http://www.google.com">GOOGLE - 
                                       The first child of my second list item</a></li>
                <li>The second child of my second list item</li>
                <li>The third child of my second list item</li>
            </ul>
        </li>
        <li>My Third List Item
                <ul>
                <li>The first child of my third list item</li>
                <li>The second child of my third list item</li>
                <li>The third child of my third list item</li>
            </ul>
        </li>
        <li>My Fourth List Item</li>
    </ul>
</div>
<div class="accordionMain"><h3>This is the main content area.</h3>
</div>

现在是css：

/* This is for the accordion style menu only */
div.accordion{      
    height: 100px;
    width:150px;
    background:darkblue;        
    float:left;             
}
div.accordion ul{               
    margin:0px;
    padding:0px;        
    list-style-type:none;       
}
/* LIST ITEMS FROM 1ST LEVEL UL BEFORE LIST IS HOVERED OVER */
div.accordion ul li{        
    position:relative;
    margin:0;
    padding:1px 0px 0px 2px;            
    background-color:pink;                      
}
/* 2ND LEVEL UL BEFORE THE LIST IS HOVERED OVER */
div.accordion ul li ul{
    position:relative;      
}
/* LIST ITEMS FROM THE 2ND LEVEL UL BEFORE LIST IS  HOVERED OVER */
div.accordion ul li ul li{ 
    opacity:0.0;
    -moz-opacity:0.0;
    -o-opacity:0.0;
    -webkit-opacity:0.0;
    height:0px;
    position:relative;/*JUST ADDED 1-8 */       
}
/* 1ST LEVEL LIST ITEMS ON HOVER DO THIS TO THE LIST ITEM*/
div.accordion ul li:hover{
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    background-color:lightyellow;
    position:relative;      
}
/* 1ST LEVEL LIST ON HOVER DO THIS TO THE UL FOR THAT LIST ITEM */
div.accordion ul li:hover ul{
    background-color:red;
    z-index:20;/*JUST ADDED LAST */     

}
/* 2ND LEVEL LIST ON HOVER DO THIS TO THE LIST ITEM */
div.accordion ul li ul li:hover{ 
    background-color:fuchsia;       
}
/* 1ST LEVEL LIST ON HOVER DO THIS TO 2ND LEVEL LIST ITEMS */
div.accordion ul li:hover ul li{ 
    background-color:lime;
    height:40px; /* FOR A SMOOTH TRANSITION DO NOT USE AUTO */
    padding-left:15px;
    width:135px;
    border-bottom:1px solid black;
    opacity:1.0;
    -moz-opacity:1.0;
    transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    position:relative;                  
}

演示：http://jsfiddle.net/SVdGm/

Answer 1

嵌套列表是父列表的一部分。当您将鼠标悬停在孩子上时，您也会将鼠标悬停在父级

上

父项ul列表项在显示其子项时失去悬停能力

1 个答案: