CSS - Chrome以较浅的颜色显示重叠边框。

Question

我使用负边距技术重叠子菜单和父级的边框。 创建只有循环的视觉效果。

这适用于IE，但在Chrome中，重叠边框实际上是边框的较轻版本。

请在https://jsfiddle.net/xxe9e8ej/

看到小提琴

ul.no-style {
  list-style: none;
  margin: 0;
  padding: 0; }
  ul.no-style li {
    padding: 0; }

ul.list-inline > li {
  display: inline-block; 
 }

/* basic menu structure */
ul.menu > li {
  padding-right: 15px;
  position: relative;
  width: 50px;}
ul.menu > li > ul {
    width: auto;
    margin-top: -1px;
    display: none;
    position: absolute;
    white-space: nowrap;
    background-color: #fff;
    padding: 10px;
    border-radius: 2px; 
}
  ul.menu > li > div.multi-2col {
    display: none;
    position: absolute;
    width: 180px;
    white-space: nowrap;
    background-color: #fff;
    border: solid #eee 1px;
    border-radius: 2px; }
    ul.menu > li > div.multi-2col div.multi-2a {
      padding-right: 15px; }
    ul.menu > li > div.multi-2col div.multi-2a,
    ul.menu > li > div.multi-2col div.multi-2b {
      padding: 10px;
      width: auto;
      float: left; }
  ul.menu > li > div.multi-2col.right {
    right: 0; }
    ul.menu > li > div.multi-2col.right .multi-2a {
      padding-left: 15px; }
    ul.menu > li > div.multi-2col.right .multi-2a,
    ul.menu > li > div.multi-2col.right .multi-2b {
      width: auto;
      float: right; }
ul.menu > li:last-child {
  padding-right: 0px; }
ul.menu > li:hover ul,
ul.menu > li:hover div.multi-2col {
  display: block; }

/* border wrap submenu and parent */
ul.menu.border-wrap > li {
  padding: 0px;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent; }
  ul.menu.border-wrap > li > a {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    display: block;
    background-color: #eee; }
ul.menu.border-wrap > li:hover {
  background-color: #eee;
  border-top: solid red 1px;
  border-left: solid red 1px;
  border-right: solid red 1px; }
  ul.menu.border-wrap > li:hover a {
    z-index: 5; }
  ul.menu.border-wrap > li:hover > ul, ul.menu.border-wrap > li:hover > div.multi-2col {
    background-color: #eee;
    border: solid red 1px;
    left: -1px;
    z-index: 2; }