我是 CSS 和网站设计的新手。请参阅本页左侧的菜单: 当您将鼠标悬停在菜单元素上时,文本周围的背景会变成白色,但我希望整行以及文本上方和下方的一点点也变成白色,类似于顶部菜单。这是我的代码:
.child-sidebar-menu
{
background-color: #DEDEDE;
}
.advanced-sidebar-menu ul li a{
text-decoration: none;
color: black;
border-bottom: 0px;
}
.advanced-sidebar-menu ul li a:hover{
text-decoration: none;
border-bottom: 0px;
}
.advanced-sidebar-menu li > ul li a:hover
{
color: black;
background-color: white;
}
.advanced-sidebar-menu ul ul li a{
font-weight: normal;
font-size: 100%;
border-bottom: 0px;
}
.advanced-sidebar-menu ul{
margin: 0 0 0 0px;
list-style: none;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 0px;
line-height: 200%;
}
.advanced-sidebar-menu ul li{
list-style:none;
list-style-type: none;
border-bottom: 0px;
}
.advanced-sidebar-menu li.current_page_item{
list-style-type: none;
border-bottom: 0px;
}
.advanced-sidebar-menu li.current_page_item a{
font-weight: bold;
border-bottom: 0px;
}
有什么简单的方法吗?跟border和margin有关系吗?
谢谢。
最佳答案
检查这个 JSFiddle:http://jsfiddle.net/D5sdT/
关键点是:
- 制作
<a>
标签display : block
.这将允许<a>
占据完整的水平空间为li
- 删除
padding
和margin
来自<li>
.而是将相同的给<a>
.
关于CSS:如何使文本周围的背景颜色不与文本齐平?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18008252/