Question

我正在尝试创建一个菜单，其中linkcolor应为白色，背景为蓝色。问题是当您将具有子菜单的子菜单悬停时。它们“松散”默认的黑色并继承（？）白色，使其全部变白。

http://jsfiddle.net/lasseedsvik/TzMxG/2/

产品+类别2 + ..小提琴......

使所有不悬停的子菜单链接都缺少黑色？

HTML

<ul class="topmenu">
    <li class="topmenu-root-node">
<a href="/">Welcome</a>
    </li>
    <li class="topmenu-root-node nonempty">
<a href="/About">About</a>
        <ul class="topmenu-submenu-container">
            <li class="topmenu-sub-item">
                <div class='item'><a href="/A">A</a>
                </div>
            </li>
            <li class="topmenu-sub-item">
                <div class='item'><a href="/B">B</a>
                </div>
            </li>
        </ul>
    </li>   
    <li class="topmenu-root-node selected nonempty">
<a href="/Products">Products</a>
        <ul class="topmenu-submenu-container">
            <li class="topmenu-sub-item">
                <div class='item'><a href="/Category1">Category1</a>
                </div>
            </li>
            <li class="topmenu-sub-item nonempty">
                <div class='item has-submenu'><a href="/Category2" class="topmenu-hassubmenu">Category2</a>
                </div>
                <ul class="topmenu-submenu-container">
                    <li class="topmenu-sub-item">
                        <div class='item'><a href="/Product1">Product1</a>
                        </div>
                    </li>
                    <li class="topmenu-sub-item">
                        <div class='item'><a href="/Product2">Product2</a>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="topmenu-sub-item">
                <div class='item'><a href="/Category3">Category3</a>
                </div>
            </li>
        </ul>
    </li>
</ul>

CSS：

/* Top menu */
 ul.topmenu {
    position: relative;
    z-index: 1200;
    margin: 0;
    height: 35px;
    padding: 0 18px 4px 19px;
    text-transform: uppercase;
}
ul.topmenu a {
    text-decoration: none;
    font-size: 14px;
}
ul.topmenu li {
    z-index: 1200;
    float: left;
    list-style: none;
    padding: 12px 10px 5px;
}
ul.topmenu li a:active {
}
ul.topmenu a:hover {
    color: #333333;
}
ul.topmenu li a {
    display: block;
    color: #000;
}
ul.topmenu li.hover, ul.topmenu li:hover {
    position: relative;
    z-index: 1200;
}
.topmenu-root-node:hover {
    background: url(css/images/menubg_hover.gif) repeat-x bottom;
}
/*  LEVEL TWO  */
 .topmenu-sub-item li a {
}
ul.topmenu ul {
    width: 220px;
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 1200;
    margin: 0;
    padding: 0;
    border: #000 1px solid;
}
ul.topmenu > li > ul {
    border-top: none;
}
ul.topmenu ul li {
    padding: 4px 6px 4px 13px;
    float: none;
    z-index: 1200;
    /*background: url(css/images/menu_separator.png) bottom center no-repeat;*/
}
ul.topmenu ul li a {
    color: #000;
    border-right: none;
    display: inline-block;
    z-index: 1200;
    font-size: 12px;
    font-weight: normal;
}
ul.topmenu li:hover a {
    color: #000;
}
ul.topmenu ul li:hover {
    background: #0098c3;
    color: #fff;
}
ul.topmenu ul li ul li a {
    color: #000;
}
ul.topmenu ul li:hover a {
    color: #fff;
}
.item a {
    color: #000;
}
.topmenu-submenu-container {
    background: #fff;
}
ul.topmenu ul ul {
    left: 100%;
    z-index: 1200;
    top: 0;
}
ul.topmenu div {
    cursor: pointer;
}
ul.topmenu div.has-submenu {
    padding-right: 15px;
    /*background: url(css/images/menuarrow.png) no-repeat right;
    background-position: right;*/
}
.topmenu-root-node.selected {
    font-weight: 700;
    /*background: url(css/images/menubg_selected.jpg) repeat-x;*/
    height: 28px;
}
.topmenu-root-node {
    /*background: url(css/images/menubg.jpg) repeat-x;*/
    height: 28px;
}

更新：

http://jsfiddle.net/lasseedsvik/TzMxG/4/

感谢Jonas！：）

Answer 1

没有必要使用javascript。

http://jsfiddle.net/jonigiuro/TzMxG/3/

您可以使用“＆gt;”选择器，这意味着选择它后面的那个

.element > a

不会包含.element中的所有a，避免样式覆盖

ul.topmenu ul li:hover > a {
    color: #fff;
}

子图上的Linkcolor继承了：hover one

1 个答案: