Question

我在ul div内有一个.menu菜单。父.menu有一个顶部和底部1px solid border。将鼠标悬停在li元素上时，会添加另一个边框，但父边框仍会显示在其上方。

我想在悬停在.menu上时不显示li顶部边框我不想使用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

有什么想法吗？

修改

背景颜色与我错误制作的边框颜色不一样。 Codepen链接已更新。

Answer 1

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

在这里你http://codepen.io/anon/pen/rapKxE
美化版http://codepen.io/anon/pen/MYrXQN

< Refer to CodePen >

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

Answer 2

同时解决方案很少。

像这样？（或者我没有正确理解）http://codepen.io/anon/pen/XJVYMW

我为margin-top: -1px

添加了ul

Answer 3

有四种解决方案：

margin-top: -1px;;
Javascript;
position: relative; top: -1px;;
transform: translateY(-1px)。

悬停时覆盖父级边框

3 个答案: