0

我正在使用 HTML 和 CSS 创建导航菜单。但它在 Firefox 19 中无法正常工作。我尝试修复它几个小时。但没有运气。

我的问题是当悬停在子菜单上时会在菜单项周围显示边框。它在 google chrome 和 safari 上正常工作。但不是在 Firefox 和 IE 7 和 8 中。

这是我的 CSS ：

#nav a:hover {
    background: #000;
    color: #c5c5c5; 
}

#nav .current a, #nav li:hover > a {
    background: -moz-linear-gradient(#D0441B, #BB3415);
    background: -webkit-linear-gradient(#D0441B, #BB3415); /* Safari 5.1+, Chrome 10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D0441B', endColorstr='#BB3415'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#D0441B', endColorstr='#BB3415')"; /* IE8+ */  
    border-color: #B5501A;
    box-shadow: 0 1px 0 0 #C97B4B inset;
    color: #FFFFFF; 
}


#nav li:hover ul li.current-sub  {
    background: #ffdfbd;
}   

#nav li:hover ul li.current-sub  a {
    color: #5f3100;
}       

#nav li:hover ul li.current-sub:hover {
    background: #ffcd98;
    border: none !important;
}   


/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none !important;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    text-shadow: none;
}

#nav ul li:hover {
    background: #ffefdd;

}

#nav ul li a:hover {        
    -webkit-border-radius: 0;
    -moz-border-radius: 0;  
    border-radius: 0;   
    border: none;
}

/* dropdown */
#nav li:hover > ul {
    display: block;     
    z-index: 999;
}

这是jsfiddle的链接

4

1 回答 1

0

您应该更多地使用子选择器>。我将其应用于此声明：

#nav .current > a, #nav > li:hover > a {
    background: -moz-linear-gradient(#D0441B, #BB3415);
    /* ... */
}

这是一个小提琴。

于 2013-03-19T09:02:34.303 回答