CSS-以浅色显示重叠边框的铬。

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

这在IE中有效，但在Chrome中，重叠边框实际上是边框的较轻版本

请在门口看小提琴

---

你不能设置边框底部n顶部颜色与子菜单的背景色完全相同吗？之后你不需要设置边框。有时菜单可能有渐变或图像，所以这不起作用。我无法重现你的问题。但是，您是否尝试过将负边际增加到-2px？

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; }