HTML/CSS鼠标上下文菜单

Question

我知道我会嘶嘶地提出这样的问题，但我对选择器很陌生，并且正在为嵌入现有UL中的儿童UL悬停效果而挣扎。

的HTML：

<ul id="ctxMenuStock"> 
     <li><a href="#ctxCMDCopy">Copy</a></li> 
     <li><a href="#ctxCMDReserve">Reserve/Outgoing</a></li> 
     <li><a href="#">Set Status <span style="font-family: Webdings">6</span></a> 
      <ul id="ctxMenuStockStatuses" runat="server"></ul> 
     </li> 
    </ul> 

ctxMenuStockStatuses由服务器代码填充在页面加载。

的CSS：

#ctxMenuStock, #ctxMenuStock ul, #ctxMenuPending, #ctxMenuPending ul{ 
     display:none; 
     margin:0; 
     padding:0; 
     list-style-type:none; 
     list-style-position:outside; 
     position:fixed; 
     line-height:1.5em; 
    } 

    #ctxMenuStock a:link, #ctxMenuStock hr, #ctxMenuStock a:active, #ctxMenuStock a:visited, #ctxMenuPending a:link, #ctxMenuPending hr, #ctxMenuPending a:active, #ctxMenuPending a:visited{ 
     display:block; 
     padding:0px 5px; 
     color:#fff; 
     text-decoration:none; 
     background-color:#333; 
    } 

    #ctxMenuStock>li:hover ul, #ctxMenuStock>li:hover ul li, #ctxMenuStock>li:hover ul li a 
    { 
     color:#fff; 
     background-color:#333; 
    } 

    #ctxMenuStock>li:hover a, #ctxMenuPending>li:hover a{ 
     background-color:#fff; 
     color:#333; 
    } 

    #ctxMenuStock ul li ul li a:hover, #ctxMenuPending ul li ul li a:hover{ 
     background-color:#fff; 
     color:#333; 
    } 

    #ctxMenuStockStatuses li 
    { 
     color:#fff; 
     background-color:#333; 
    } 

    #ctxMenuStockStatuses li:hover 
    { 
     background-color:#fff; 
     color:#333; 
    } 


    #ctxMenuStock li, #ctxMenuPending li{ 
     float:none; 
     position:relative; 
    } 


    #ctxMenuStock ul, #ctxMenuPending ul { 
     position:absolute; 
     display:none; 
     float:left; 
    } 

    #ctxMenuStock li ul a, #ctxMenuPending li ul a 
    { 
     width:12em; 
     margin: 0 0 0 4px; 
     float:left; 
    } 

    #ctxMenuStock ul ul, #ctxMenuPending ul ul{ 
     top:auto; 
    } 

    #ctxMenuStock li ul ul, #ctxMenuPending li ul ul { 
     left:12em; 
     margin:0px 0 0 10px; 
    } 

    #ctxMenuStock li:hover ul ul, #ctxMenuStock li:hover ul ul ul, #ctxMenuStock li:hover ul ul ul ul{ 
     display:none; 
    } 
    #ctxMenuStock li:hover ul, #ctxMenuStock li li:hover ul, #ctxMenuStock li li li:hover ul, #ctxMenuStock li li li li:hover ul{ 
     display:block; 
    } 

    #ctxMenuPending li:hover ul ul, #ctxMenuPending li:hover ul ul ul, #ctxMenuPending li:hover ul ul ul ul{ 
     display:none; 
    } 
    #ctxMenuPending li:hover ul, #ctxMenuPending li li:hover ul, #ctxMenuPending li li li:hover ul, #ctxMenuPending li li li li:hover ul{ 
     display:block; 
    } 

菜单基本风格的深色背景，白色的文字，但悬停这个逆转。这适用于父菜单，但子菜单不会更改，并保持黑色。

我知道这CSS的一些是相互矛盾的，但它变得难以遵循。我似乎无法找到很多（如果有的话）在线工作示例如何使用子菜单执行此操作。

有人请告诉我最好的办法。

编辑： 按照要求，例如的jsfiddle创建：http://jsfiddle.net/KzhEP/ 虽然我的主要项目中，oncontextmenu属性附加到我的表服务器端的每一行。我嘲笑了一个简单的例子，但由于某种原因，我无法获得在jsfiddle上工作的右键单击功能。

Answer 1

这是艰难的啮合告诉你是想在这里实现什么，而是你可以试试下面的〜

删除以下的CSS，因为它是覆盖在内嵌的黑色白色的CSS的变化：

#ctxMenuStock>li:hover ul, #ctxMenuStock>li:hover ul li, 
#ctxMenuStock>li:hover ul li a{ 
    color:#fff; 
    background-color:#333; 
} 

然后改变CSS选择从提供悬停效果：

#ctxMenuStock>li:hover a, #ctxMenuPending>li:hover a{ 
    background-color:#fff; 
    color:#333; 
} 

到：

#ctxMenuStock li:hover > a, #ctxMenuPending li:hover > a{ 
    background-color:#fff; 
    color:#333; 
} 

这样，所有您指定li元素#ctxMenuStock和#ctxMenuPending没有深度的mattter - 但你只操纵徘徊li元素的子锚标记。

实施例：http://jsfiddle.net/embWK/

Answer 2

您的CSS错误。从外观上看，你正在为同样的事情输入不同的设置。再次检查你的CSS，你会发现你的错误