背景悬停

Question

我希望菜单项在悬停背景上但在边框内。我的上一个li选项不是覆盖整个块而是覆盖填充端。有人可以帮忙吗？

这是我的代码：

＆＃13;

＆＃13;

 .sub-menudiv {
   width: 505px;
   margin-left: 42px;
 }
 .sub-menu {
   font-family: 'Open Sans', sans-serif;
   font-size: 12px;
 }
 .sub-menu ul ul {
   display: none;
   margin: 4px 0 0 0;
 }
 .sub-menu ul li:hover > ul {
   display: block;
 }
 .sub-menu ul {
   /*background: #111312; */
   margin: 0;
   list-style: none;
   position: relative;
   padding: 0;
   border: 2px solid #bababa;
   border-top: 0px solid transparent;
 }
 .sub-menu ul:after {
   content: "";
   clear: both;
   display: block;
 }
 .sub-menu ul li {
   float: left;
   /*border-bottom: 1px solid transparent; */
   border-right: 2px solid #9d9d9c;
 }
 .sub-menu ul li:last-child {
   border: none;
 }
}
.sub-menu ul li:hover {
  background: #111312;
  border-bottom: 3px solid #fff;
}
.sub-menu ul li:hover a {
  display: block;
  color: #db9500;
  background-color: #e3e3e3;
  background-image: url(images/bg.png);
}
.sub-menu ul li a {
  display: block;
  padding: 5px;
  color: #000000;
  text-decoration: none;
}
.sub-menu ul ul {
  background: #111312;
  padding: 0;
  position: absolute;
  top: 100%;
}
.sub-menu ul ul li {
  float: none;
  position: relative;
  border-right: none;
}
.sub-menu ul ul li a {
  padding: 10px;
  color: #000;
  display: block;
}
.sub-menu ul ul li a:hover {
  background: #111312;
  color: #fff;
}
.sub-menu ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
  padding: 0;
}
.sub-menu ul ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid pink;
  position: relative;
}
.sub-menu ul ul ul li a {
  padding: 10px;
  color: #fff;
  display: block;
  text-decoration: none;
}
.sub-menu ul ul ul li a:hover {
  background: #95CEF1;
  color: #000;
}
.sub-menu ul ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
.sub-head {
  width: 500px;
  height: 200px;
  background: #789;
}
.sub-foot {
  width: 500px;
  height: 200px;
  background: #123;
}

＆＃13;

<div class="sub-menudiv">
  <div class="sub-menu">
    <ul>

      <li><a href="paidodontiko-6-minon-3-eton.html">6 μηνών - 3 ετών</a>
      </li>
      <li><a href="paidodontiko-3-6-eton.html">3 - 6 ετών</a>
      </li>
      <li><a href="paidodontiko-6-12-eton.html">6 - 12 ετών</a>
      </li>
      <li><a href="paidodontiko-genikes-plirofories.html">Πληροφορίες</a>
      </li>
      <li><a href="paidodontiko-genikes-plirofories.html">Όχι παίζουμε!</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将您的CSS更改为：

.sub-menu ul li:last-child {
border: medium none;
width: 186px;
}

但是，只有当您不希望自己的菜单具有响应时，这才有效。我认为您的当前代码确实如此。