Question

我正在尝试使用某些css创建的导航菜单的样式。当用户将鼠标悬停在菜单项上时，我希望菜单背景颜色发生变化。菜单名为＆＃39; side-bar-menu＆＃39;

我遇到的困难是在悬停时使背景颜色填充菜单项。链接的背景颜色会发生变化，但我不会填充实际的菜单项。我尝试了填充，这种工作有点但它没有正确填充菜单项....帮助

到目前为止，这是我的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

请试试这个：

.sub-menu li {
    margin: 0;
    width: 100%;
}

.sub-menu li a {
    width: 100%;
    padding-left: 40px;
}

它在检查员工作。

Answer 2

要做的3件事：

1。）从padding完全删除#menu-side-bar-menu li

2。）将li的填充添加到#menu-side-bar-menu a并添加display: block以使li完全填充a

3.。）从padding规则中移除#menu-side-bar-menu li a:hover，以避免在悬停时更改大小。

这导致以下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; 
}

造型wordpress菜单

2 个答案: