0

我是 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;
}

有什么简单的方法可以做到这一点？它与边框和边距有关吗？

谢谢你。

4

2 回答 2

0

我试着玩你的网站并想出了这个我希望这是你想要的。改变你的

.advanced-sidebar-menu li > ul li a:hover
 {
   color: black;
background-color: white;
 }

至

.advanced-sidebar-menu li > ul li:hover
 {
   color: black;
background-color: white;
 }
于 2013-08-02T03:42:12.637 回答
0

检查这个 JSFiddle：http: //jsfiddle.net/D5sdT/

关键点是：

  1. 制作<a>标签display : block。这将允许<a>占据完整的水平空间li
  2. 从中删除padding和。而是给.margin<li><a>
于 2013-08-02T03:42:42.613 回答