0

I'm trying to create a menu were the linkcolor should be white with a blue background. Problem is when you hover a submenu that has submenus. They "loose" the default black color and inherits (?) the white one making it all white.

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

Products + Category2 + .. in the fiddle...

What's missing to make all submenus links, that aren't hover, have a black color?

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;
}

UPDATE:

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

Fixed thanks to Jonas! :)

4

1 回答 1

1

不需要所有的javascript。

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

您可以使用“>”选择器,这意味着选择紧随其后的那个

.element > a

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

ul.topmenu ul li:hover > a {
    color: #fff;
}
于 2013-09-16T12:11:07.217 回答