0

我有以下导航菜单的 CSS

ul#css3menu_top,ul#css3menu_top ul {
    margin:0;
    list-style:none;
    padding:0;
}
ul#css3menu_top,ul#css3menu_top .submenu {
    background-color:#EEEEEE;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
ul#css3menu_top .submenu {
    visibility:hidden;
    position:absolute;
    left:0;
    top:100%;
    opacity:0;
    -moz-transition:all 0.5s;
    -webkit-transition:opacity 0.5s;
    -o-transition:opacity 0.5s;
    -moz-box-shadow:3.5px 3.5px 5px #000000;
    -webkit-box-shadow:3.5px 3.5px 5px #000000;
    box-shadow:3.5px 3.5px 5px #000000;
    float:left;
    background-color:#EEEEEE;
    border-width:2px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-color:#FFF;
    padding:0 10px 10px;
}
ul#css3menu_top li:hover>.submenu {
    visibility:visible;
    opacity:1;
}
ul#css3menu_top li {
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
ul#css3menu_top li:hover {
    z-index:1;
}
ul#css3menu_top ul .submenu {
    z-index:2;
    position:absolute;
    left:100%;
    top:0;
}
ul#css3menu_top {
    font-size:0;
    width:100%;
    z-index:999;
    position:relative;
    display:inline-block;
    zoom:1;
    padding:0 0%;
    margin:0 0%;
    *display:inline;
}
ul#css3menu_top .column {
    float:left;
}
* html ul#css3menu_top li a{
    display:inline-block;
}
ul#css3menu_top>li {
    margin:0;
    width:17%;
}
ul#css3menu_top li.toplast{
    width:15%;
}
ul#css3menu_top a:active, ul#css3menu_top a:focus {
    outline-style:none;
}
ul#css3menu_top a{
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 14px Calibri;
    color:#EEEEEE;
    text-shadow:#FFF 0 0 1px;
    cursor:pointer;
    padding:6px 15px 6px 3px;
    background-color:#666666;
    background-image:url("mainbk.png");
    background-repeat:repeat;
    background-position:0 0;
    border-width:0 0 0 1px;
    border-style:solid;
    border-color:#c0c0c0;
}
ul#css3menu_top ul li {
    float:none;
    margin:10px 0 0;
}
ul#css3menu_top ul a {
    text-align:left;
    padding:4px;
    background-color:#EEEEEE;
    background-image:none;
    border-width:0;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    font:14px Calibri;
    color:#666666;
    text-decoration:none;
}
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed {
    background-color:#EEEEEE;
    color:#666666;
    background-position:0 100px;
    text-decoration:none;
}
ul#css3menu_top img {
    border:none;
    vertical-align:middle;
    margin-right:6px;
}
ul#css3menu_top span {
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
}
ul#css3menu_top ul span {
    padding-right:8px;
}
ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed {
    background-color:#EEEEEE;
    background-image:none;
    color:#666666;
    text-decoration:none;
}
ul#css3menu_top li.topfirst>a {
    padding-left: 7px;
    border-width:0;
    border-radius:4px 0 0 4px;
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-right-radius:0;
}
ul#css3menu_top li.toplast>a {
    padding-right: 7px;
    border-radius:0 4px 4px 0;
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0;
    -webkit-border-top-right-radius:4px;
    -webkit-border-bottom-right-radius:4px;
}

@media only screen and (max-width:900px),only screen and (max-device-width:900px){
ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}
@media only screen and (max-width:600px),only screen and (max-device-width:600px){
ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}
@media only screen and (max-width:450px),only screen and (max-device-width:450px){
ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}


/*opera hack*/
@media only screen and (min-width:900px){
        html>/**/body noindex:-o-prefocus, html>/**/body  ul#css3menu_top{
            display:table;
        }
        html>/**/body noindex:-o-prefocus, html>/**/body  ul#css3menu_top>li{
            width:auto;
            float:none;
            display:table-cell;
        }
        html>/**/body noindex:-o-prefocus, html>/**/body  ul#css3menu_top li.toplast{
            width:auto;
            display:table-cell;
        }

}

当我将鼠标悬停在子菜单上时，我无法弄清楚如何更改文本颜色

这是它的工作原理

http://jsfiddle.net/n3FAq/

有人有什么想法吗？

4

2 回答 2

0

尝试这个

ul#css3menu_top ul li a:hover {
    color: #c00;
}

演示

于 2013-03-29T16:38:33.790 回答
0

子菜单中的链接没有悬停规则。

ul#css3menu_top .submenu a:hover {
    color: red;
}

JSFiddle

于 2013-03-29T16:40:12.880 回答