父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顯示

回答

相關問題