嵌套列表和悬停效果的问题

我从包含嵌套列表的菜单中收到了一些丑陋的行为。嵌套列表和悬停效果的问题

父菜单有一些大类。当用户将鼠标悬停在这些列表项目之一上时，下面会出现一个子菜单。这可以。

但是，子项目也可以有子菜单（我将它们称为孙子）。这些也会出现在悬停中，但当用户不再在孙子上徘徊时，整个子菜单就会消失。

这是最好的一个FIDDLE

徘徊父显示3个孩子解释。这很好。
徘徊在孩子1上显示的孙子。这也是不错。
但是，现在试图在儿童1下的孙子被展开后点击儿童2或儿童3变得笨拙。这是非常糟糕的。

在没有这种愚蠢行为的情况下，如何在这里实现体面的悬停效果？（A CSS解决方案将是优选的。）

HTML

<div id="centeredmenu"> 
    <ul> 
     <li> 
     <p><a href="#"><span>Parent</span></a></p> 
      <ul> 
       <li> 
        <a href="#">Child 1 </a> 
         <ul> 
         <li><a href="#">grandchild 1</a></li> 
         <li><a href="#">grandchild 2</a></li> 
         <li><a href="#">grandchild 3</a></li> 
         </ul> 
       </li> 
       <li><a href="#">Child 2</a></li> 
       <li><a href="#">Child 3</a></li> 
       </ul> 
      </li> 
    </ul>

CSS

#centeredmenu ul { 
    clear:left; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    left:50%; 
    text-align:center; 
} 
#centeredmenu ul li { 
    display:block; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    right:50%; 
} 
#centeredmenu ul li a { 
    display:block; 
    margin:0 0 0 0px; 
    padding:3px 10px; 
    background: rgb(240,240,240); 
    color:#333333; 
    text-decoration:none; 
    line-height:2.3em; 
    border-top: 4px solid transparent; 
    border-right: 1px solid transparent; 
    border-bottom: 3px solid transparent; 
    border-left: 1px solid #848484; 
} 

/*hides the sub menu*/ 
#centeredmenu ul li ul li{ 
    display: none; 
} 

/*displays sub menu on hover*/ 
#centeredmenu ul li:hover ul li { 
    display: block; 
    clear: both; 
    margin-left: 15px; 
} 

/*hides sub-sub menu*/ 
#centeredmenu ul li ul li ul{ 
    display: none; 
} 

/*displays sub-sub menu on hover*/ 
#centeredmenu ul li ul li:hover ul { 
    display: block; 
    clear: both; 
    margin-left: 15px; 
}

来源

2012-12-11 Forty-Two

此演示效果有关：http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html – hansvedo

@hansvedo感谢您的链接。它最终导致了解决方案，并进行了一些调整和z-索引。如果你想充实评论并将其作为答案发布，我很乐意接受它。 –