Question

我正在创建一个包含HTML和CSS的导航菜单。但它在Firefox 19中无法正常工作。我试图将其修复数小时。但没有运气。

我的问题是当悬停在子菜单上时会显示菜单项周围的边框。它正在谷歌铬和野生动物园正常工作。但不是在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

的链接

Answer 1

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

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

这是Fiddle。

水平导航栏不能在IE和Firefox中工作

1 个答案: