-2

我的 css 菜单在这里：我的 css 菜单

请注意，如果您将鼠标悬停在下面的“关于我们”上，您会看到“我们的神职人员”子菜单已经出现。当您将鼠标悬停在“我们的神职人员”上以显示时，我不希望我想要它。

在此处输入图像描述

上面的截图来自 firefox，而 webkit 浏览器显示 1-2px 的差异，如下所示，我不知道为什么？它有时也会影响菜单的工作方式。

在此处输入图像描述

这是我的菜单css（我使用的是wordpress，这意味着没有html）：

随时帮助我，如果你想清理 css，你也可以！

#navbar {
height: 40px;
padding-left: 10px;
margin-left:-10px;
margin-top: -29px;
margin-bottom:0;
background: #F4DE9F;
width:930px;
/*backgroundborder-top: 2px solid #F4DE9F;
border-bottom: 2px solid #F4DE9F;*/
}

#navbar li {
float: left;
list-style: none;
margin-bottom: 30px;
margin-left:-20px;
}
#navbar li a {
font-family: "MuseoSans_500";
color: #3C290B;
font-weight: 500;
text-transform: uppercase;
}
#navbar li:hover {
background:rgba(255, 241, 194, 100); /*#FFF1C2;*/
color: #645548;
text-decoration: none;
}
#navbar li a:hover {
background:rgba(255, 241, 194, 100); /*#FFF1C2;*/
color: #645548;
text-decoration: none;
}
#navbar .parent > a, #navbar .parent > a:hover {
background: #F4DE9F;
background-position: right;
background-repeat: no-repeat;
}
#navbar ul, #navbar ul li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#navbar ul li a {
display: inline-block;
padding: 11px 16.2px 8px;
text-decoration: none;
}

/*
#navbar ul li a:hover {
}
#navbar ul #first a:hover {
}*/

#navbar ul li {
position: relative;
}
#navbar li ul {
display: none;
left: 11px;
position: absolute;
top: 51px;
}
#navbar li ul a {
background: #F4DE9F;
}
#navbar ul ul ul li {
}
#navbar ul li:hover ul {
display: inline-block;
}
#navbar ul li:hover ul, #navbar ul ul li:hover ul, #navbar ul ul ul li:hover ul {
display: block;
margin: -11px 0 0 -11px;
}
/*#navbar ul li:hover ul li a, #navbar ul ul li:hover ul li a, #navbar ul ul ul li:hover ul li a {
display: block;
}*/
#navbar ul li:hover ul ul, #navbar ul ul li:hover ul ul {
margin-top: -50px;
margin-left:129px;
}

#navbar ul li:hover ul li a {
padding: 10px 14px 8px;
width: 112px;
}

#navbar ul li:hover ul ul li a {
padding: 10px 14px 8px;
width: 112px;
}
/*#navbar ul ul ul li:hover ul li a {
padding: 0 16px 0 24px;
width: 140px;
}*/
#navbar .children li a:hover {
color: #000;
}
4

2 回答 2

0

首先规范化你的样式是一个很好的 CSS 实践，这样所有的浏览器都可以为一些基本的 HTML 元素获得相同的样式。

我在样式表的开头添加了这个

* { margin: 0px; padding: 0px; border: 0px; text-decoration: none }

还有一个用于规范化的综合样式表文件，它涵盖了所有浏览器甚至 html5。尝试在您的 style.css 文件之前添加它。

这是链接： http: //necolas.github.com/normalize.css/

对于悬停问题，请尝试此 css 更改

代替

 #navbar ul li:hover ul {
     display: inline-block;
}

    #navbar ul li:hover ul, #navbar ul ul li:hover ul, #navbar ul ul ul li:hover ul {
        display: block;
        margin: -11px 0 0 -11px;
    }

和

#navbar ul li:hover > ul {
     display: inline-block;
}
#navbar ul li:hover > ul, #navbar ul ul li:hover > ul, #navbar ul ul ul li:hover > ul {
    display: block;
    margin: -11px 0 0 -11px;
}

希望能帮助到你 ：）

于 2012-11-21T19:48:04.360 回答
0

当你最终得到一个样式表时，感觉非常臃肿，有几条规则和很多特殊性，比如#navbar ul ul ul li:hover ul退后一步看看你是否可以稍微简化一下规则通常是好的。

由于您使用的是 Wordpress，它带有许多方便的类，使工作更容易。在这种情况下.menu-item和.sub-menu。

用以下样式替换 menu-css 可以解决您在问题中提到的问题，在 Chrome 23、Safari 6 和 Firefox 16 中尝试过。

这里的例子：http: //jsfiddle.net/5qEwH/

.menu-item {
    display: inline-block;
    position: relative;
    font-family: "MuseoSans_500";
    font-weight: 500;
    text-transform: uppercase;
    background: #F4DE9F;
}

.menu-item:hover {
    background: #FFF1C2;
}

.menu-item a {
    display: inline-block;
    height: 20px;
    padding: 10px;
    text-decoration: none;
    color: #645548;
}
/* Hide submenus by default */
.sub-menu {
    display: none;
    position: absolute;
    width: 150px;
    top: 40px;
}

.sub-menu .menu-item {
    width: 100%;
}
/* The second level sub-menu should be moved to the right */
.sub-menu .menu-item > .sub-menu {
    top: 0;
    left: 150px;
}

/* Show submenus on hover */
.menu-item:hover > .sub-menu {
    display: block;
}
于 2012-11-21T21:01:29.827 回答