CSS保持父水平菜单背景

Question

我正在使用html/css设计简单的水平菜单，请参阅jsfiddle.net。问题是，在li个孩子上面后，我无法保持父li背景。见下面的印刷屏幕：

在此状态下，将鼠标悬停在菜单子项上后，例如Settings或Applications，我无法保留父块的背景，例如Options：

Answer 1

您为:hover代码添加了a效果，当您离开a代码:hover时，您只需将:hover添加到{{1}使用此标记和li，您不会失去父级的:hover效果

:hover

.nav {
  background: #C2E2EC;
  height: 50px;
  display: inline-block;
  width: 100%;
  margin: 0 0 10px 0;
  padding: 0;
}
.nav li {
  float: right;
  list-style-type: none;
  position: relative;
}
.nav li a {
  font-size: 11px;
  color: #000;
  display: block;
  line-height: 50px;
  padding: 0 26px;
  text-decoration: none;
  font-family: Tahoma;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
/* changed :hover to li:hover */
.nav li:hover {
  background-color: #2e2e2e;
}
#settings img {
  margin: 0;
  padding: 0;
}
#settings a {
  height: 50px;
  font-size: 11px;
}
#settings img {
  width: 48px;
  margin: 0px;
  padding: 0px;
  font-size: 11px;
}
#search {
  width: 338px;
  margin: 4px;
}
#search_text {
  width: 297px;
  padding: 12px;
  font-size: 11px;
  font-family: tahoma;
  border: 0 none;
  height: 34px;
  direction: rtl;
  text-align: right;
  margin-right: 0;
  color: white;
  outline: none;
  background: #1f7f5c;
  float: right;
  box-sizing: border-box;
  transition: all 0.15s;
}
#search_text:focus {
  background: rgb(64, 151, 119);
}
#search_button {
  border: 0 none;
  cursor: pointer;
  float: left;
  height: 34px;
  margin-left: 5px;
  margin-top: 5px;
  padding: 0;
  text-align: center;
  width: 34px;
}
#options a {
  border-left: 0 none;
}
#options > a {
  background-position: 85% center;
  background-repeat: no-repeat;
  padding-right: 42px;
  color: #fff;
}
.subnav {
  visibility: hidden;
  position: absolute;
  top: 110%;
  right: 0;
  width: 200px;
  height: auto;
  opacity: 0;
  transition: all 0.1s;
  background: #232323;
  margin: 0;
  padding: 0;
}
.subnav li {
  float: none;
}
.subnav li a {
  border-bottom: 1px solid #2e2e2e;
  color: #fff;
}
#options:hover .subnav {
  visibility: visible;
  top: 100%;
  opacity: 1;
}