我在Chrome列表中的链接上遇到奇怪的悬停行为。
我已经成功地在jsFiddle中复制了该问题,并从网站复制了整个HTML和CSS。
问题出在侧面菜单的第一个元素上,即其中带有“ Maria Montessori”的链接。发生的情况是,悬停区域就像在中间的文本区域一样中断。就像按钮的中间部分覆盖了东西。自己尝试以了解我的意思。
相对代码是这样的:
<ul class="page-menu">
<li class="page_item page-item-30"><a href="http://...">Maria Montessori</a></li>
<li class="page_item page-item-32"><a href="http://...">La pedagogia scientifica</a></li>
...
和CSS:
.page-menu {
display: inline-block;
margin-right: 25px;
text-align: center;
width: 210px;
li {
margin-bottom: 10px;
}
li.current_page_item {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
li.current_page_parent {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
a {
background-color: $grey-light;
border-bottom: 2px solid $grey-light;
color: $grey-dark;
display: block;
font-family: Lato;
font-weight: 300;
line-height: 1.2;
padding: 15px 20px;
text-decoration: none;
text-transform: uppercase;
&:hover {
background-color: $blue-light;
border-bottom: 2px solid $blue-dark;
color: white;
font-weight: 400;
}
}
ul.children {
margin-top: 10px;
li {
margin-bottom: 10px;
margin-left: 10px;
}
li a {
background-color: #f9f9f9;
border-bottom: 2px solid #f9f9f9;
color: $grey-dark;
display: block;
font-family: Lato;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
&:hover {
background-color: $blue-light;
border-bottom: 2px solid $blue-dark;
color: white;
font-weight: 400;
}
}
li.current_page_item {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
}
.page_item_has_children > .children {display: none;} /*hides the submenu*/
.page_item_has_children.current_page_item > .children,
.page_item_has_children.current_page_ancestor > .children {display: block;} /*shows the submenu for the current page or when on its subpages */
}
使用开发人员工具对其进行检查并没有真正的帮助,奇怪的是,该问题似乎仅出现在第一个元素上。无论如何,在Firefox中工作正常。
最佳答案
由于div的line height属性,您的div menu-menu-1-container与第一个菜单重叠。nav-menu使用padding代替
.nav-menu {
padding: 17px; /* remove line-height property */
}
Updated working Code
关于css - Chrome上的链接出现奇怪的悬停行为,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27376839/