用CSS如何实现此效果？

效果如上图。

看起来貌似很简单，但是做起来有难度。路过的学霸们能否指点一下？

学渣在此谢过了 ~~(╯﹏╰)||

.item {
border:1px solid green;
border-bottom: 1px solid #000;
}

.item:hover{
border:1px solid #000;
border-bottom: 0 // 或者 1px solid transparent
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="a.css">
  <style>
    *{margin: 0; padding: 0;}
    li{list-style: none;}
    .box{margin: 50px 0 0 150px}
    ul{border-bottom:1px solid #000; width: 100%; height: 50px;  }
    ul li{float: left; width:70px; border:1px solid #000;margin-left:-1px;text-align: center; height: 50px; line-height: 50px;}
    li:hover,.act{border:1px solid red; border-bottom: 1px solid #FFF; position: relative;z-index: 2;}
  </style>
</head>
<body>
 <div class="box">
     <ul>
         <li>首页</li>
         <li>首页</li>
         <li>首页</li>
         <li>首页</li>
         <li>首页</li>
     </ul>
 </div>
</body>
</html>

这样子的

css hover border-bottom:none

demo:nav

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0; padding: 0;}
        li{
            list-style: none;
        }
        ul.tabBox{
            border-bottom:1px solid #000;
            width: 100%;
            height: 53px;
            font-size: 0;
        }
        ul.tabBox li{
            font-size: 16px;
            letter-spacing: normal;
            word-spacing: normal;
            display: inline-block;
            width:70px;
            border:1px solid blue;
            border-bottom: 0;
            margin-left:-1px;
            text-align: center;
            height: 52px;
            line-height: 52px;

        }
        ul.tabBox li:hover{
            border:1px solid black;
            height: 52px;
            border-bottom: 1px solid #FFF;
            position: relative;z-index: 2;
        }
        ul.tabBox li:first-child{
            margin-left:50px;
        }
    </style>
</head>
<body>
    <ul class="tabBox">
        <li>Tab1</li>
        <li>Tab2</li>
        <li>Tab3</li>
        <li>Tab4</li>
        <li>Tab5</li>
    </ul>
</body>
</html>

前面大家已经说得比较详细了，如果要兼容较低版本的IE浏览器，可以考虑 a:hover 上做样式

http://jsbin.com/yagurutore/edit?html,css,output

【热门文章】