父ul列表项失去悬停能力，当他们的孩子uls显示

我有一个垂直菜单，从0不透明度过渡到1就好了。除了当我悬停在第二级li上ul我可以看到上层的列表项，但不能点击它们。当我将光标从最后一个li移到上一级li时，ul关闭，上一级列表恢复。父ul列表项失去悬停能力，当他们的孩子uls显示

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

来源

2012-01-09 user1137960

我不确定你想要做什么。我注意到，当你从绿色菜单滑到粉红色菜单时，菜单跳转 - 是这个问题吗？如果是这样，你希望发生什么？通常这种菜单使用点击而不是只是悬停，所以这不是问题。您可能需要重新考虑设计。 – 2012-01-09 05:08:51

是的，这是问题。我期望的是，上层ul列表项目现在可以点击，但是当菜单跳回来时，除非我从底层上升，否则不能再被盘旋。除非从底部开始，否则无法点击第三个列表项目。我认为也许这可能是一个高度或填充的问题，但尝试所有可能的组合后，我可以想象它仍然无法工作。我是CSS菜单的新手，所以想学很多东西。感谢您的时间和帮助。 – user1137960 2012-01-09 16:53:23

我只是想通了。将鼠标悬停在子列表项上后，我需要转换回0px的高度。这是我添加的代码。 div.accordion ul li ul li { \t \t height：0px; \t \t \t \t transition：all 1s ease-in-out; \t \t -moz-transition：all 1s ease-in-out; \t \t -o-transition：all 1s ease-in-out; \t \t -webkit-transition：all 1s ease-in-out; \t} – user1137960 2012-01-09 17:43:17

-1

嵌套列表父列表的一部分。当你将鼠标悬停在孩子身上时，你也在父母的上方徘徊

来源

2012-01-09 05:18:46 rugg

父ul列表项失去悬停能力，当他们的孩子uls显示

回答

相关问题