悬停时覆盖父级的边框

Question

我在div .menu 中有一个ul 菜单。父 .menu 有一个顶部和底部 1px solid border。当悬停在 li 元素上时，会添加另一个边框，但父边框仍会出现在其上方。

当悬停在li 上时我不想显示.menu 顶部边框我不想使用 js，除非它是唯一的解决方案。

这是我的代码和我的临时修复。

HTML：

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Fun</a></li>
    <li><a href="#">Work</a></li>
  </ul>
</div>

CSS：

  .menu{
    width: 100%;
    background-color: black;
    /* I want this border to... ↓ */
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    box-sizing: border-box;
  }

  .menu ul{
    list-style: none;
    overflow: hidden;
    margin: 0px;
    height:35px;
  }

  .menu ul li{
    display: block;
    float:left;
    border-left: 1px solid gray;
    position: relative;
  }

  .menu ul a{
    color: #FFF;
    padding: 10px;
    display: block;
  }

  .menu ul a:hover{
    text-decoration: none;
    background-color: white;
    color: pink;
    /* ...not be displayed above this border when hovering */
    border-top: 3px solid pink;
  }

我只发现了这个低效的解决方案：

.menu ul:hover{
  position: relative;
  top: -1px;
}

Codepen 链接：http://codepen.io/eldev/pen/YPYLQz?editors=110

有什么想法吗？

编辑：

backgound-color 和border-color 不一样，我弄错了。 Codepen 链接已更新。

Answer 1

同时有几个解决方案。

喜欢这样吗？ （或者我理解不正确）http://codepen.io/anon/pen/XJVYMW

我为ul添加了margin-top: -1px

Answer 2

必须对 CSS 进行一些修改；为了更容易理解，我已将所有更改添加到 HTML 部分。我没有修改 CSS 部分。

给你http://codepen.io/anon/pen/rapKxE
还有美化版http://codepen.io/anon/pen/MYrXQN

< Refer to CodePen >

注意检查 codepen 上的代码以获取最新更新。

Answer 3

有四种解决方案：

1. margin-top: -1px;;
2. Javascript ;
3. position: relative; top: -1px;;
4. transform: translateY(-1px)。