请问这种导航高亮，怎么处理分割线

Question

1.页面主导航，鼠标划过背景高亮
2.请问该怎么处理导航项与项之间的分割线

Answer 1

1.用背景图片替代,切换的时候把图片隐藏掉
2.用竖线 | 这个方法虽然不太好吧 也常用
3.导航项里 单独放置一个div 存放文字设置高度,设置border-right.hover的时候可以隐藏
css

<style>
        * {
            padding: 0;
            margin: 0;
        }

        a{
            text-decoration: none;
        }
        ul {
            list-style: none;
        }

        nav {
            height: 40px;
            background: #333;
            width: 800px;
            margin: 10px auto;
        }
        ul li{
            float: left;
        }
        ul li a{
            display: block;
            height: 40px;
            line-height: 40px;
            width:60px;
            padding-top: 10px;
            box-sizing: border-box;

        }
        ul li a div{
            color:#fff;
            font-size: 14px;
            text-align: center;
            height: 20px;
            line-height: 20px;
            border-right: 1px solid #fff;
        }
        ul li a:hover{
            background: red;
            color:#fff;
            text-decoration: none;
        }
        ul li a:hover div{
            border: none;
        }
    </style>

html

<nav>
        <ul>
            <li>
                <a href="#">
                    <div>导航一</div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div>导航二</div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div>导航三</div>
                </a>
            </li>
        </ul>
    </nav>

Answer 2

其实就是你每一项都是单独的div。当鼠标在你这个div上的时候，改变背景颜色的样式就可以了。

Answer 3

：：before