CSS菜单和子菜单问题+ webkit的浏览器px问题

Question

这里我的css菜单是：My css menu

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

上面的截图来自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;
}

Answer 1

它是一种很好的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;
}

希望有所帮助：）

Answer 2

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

由于您使用的是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;
}