css - 样式 wordpress 菜单

Question

我正在尝试设置我使用一些 CSS 创建的导航菜单的样式。当用户将鼠标悬停在菜单项上时，我希望菜单背景颜色发生变化。该菜单称为“侧边栏菜单”

我遇到的困难是在悬停时让背景颜色填充菜单项。链接的背景颜色发生变化，但我没有填充实际的菜单项。我试过填充，哪种方法有效，但它没有正确填充菜单项....帮助

到目前为止，这是我的 CSS:-

/* The SideBar menu styling*/
#menu-side-bar-menu li  {
list-style-type: none;
border-bottom: 1px solid #D6D6D6;
background-color: #f2f1f1;
margin: 0px 0px 0px 20px;
padding: 5px 10px 5px 10px;
}

#menu-side-bar-menu a {
color: #BA9E2F;
}

#menu-side-bar-menu li a:hover { 
background: #BA9E2F !important;
color: #fff; 
padding-top:8px;
padding-bottom:9px;
}

这是一个 link到我要设置样式的页面。它是页面左侧的菜单

Answer 1

要做的三件事:

1.) 从 #menu-side-bar-menu li 中完全移除 padding

2.) 将 li 的填充添加到 #menu-side-bar-menu a 并添加 display: block li 由 a

完全填充

3.) 从 #menu-side-bar-menu li a:hover 规则中移除 padding 以避免悬停时尺寸发生变化。

这会产生以下 CSS:

#menu-side-bar-menu li  {
  list-style-type: none;
  border-bottom: 1px solid #D6D6D6;
  background-color: #f2f1f1;
  margin: 0px 0px 0px 20px;
}

#menu-side-bar-menu a {
  display: block;
  color: #BA9E2F;
  padding: 5px 10px 5px 10px;
}

#menu-side-bar-menu li a:hover { 
  background: #BA9E2F !important;
  color: #fff; 
}