1

我知道我会因为提出这样的问题而受到嘘声，但我是选择器的新手，并且正在为嵌入现有 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 上获得右键单击功能。

4

2 回答 2

2

在这里很难说出你想要达到什么，但你可以试试下面的~

删除以下 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不是深度 - 但您只操作悬停li元素的子锚标记。

示例：http: //jsfiddle.net/embWK/

于 2013-01-14T12:38:13.383 回答
0

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

于 2013-01-14T12:05:14.147 回答