这里我的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;
}
答案 0 :(得分: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;
}
希望有所帮助:)
答案 1 :(得分:0)
当你最终得到一个感觉非常臃肿的样式表时,有几个规则和很多特殊性,比如#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;
}