如果单独的话，是不会这样的，
如果是在:hover之前的图片里，那没办法，你只能把:hover的图片也加上竖线就可以了。
看你这简单的竖线，没别的样式在内，你可以用右边边框来解决。
两种方法1.带竖线的字，在每个导航标记后面加入 '|'这个就是竖线
2.直接用边框
单个导航的样式加上:border-right:1px solid #ddd
这个你可以通过css的伪类来解决，因为你在 .nav ul li a里面所在了border-right:1px solid #eee所以就是给每个a设置了一个右边1个像素的实线。但是一般来说最后一个是不需要有实线的，那么伪类现在就是最好用的了，方法有几种：1.通过设置匹配父元素的最后一个子元素来设置，因为a标签的父元素是li所以这样写.nav ul li:last-child >a { border-right:none}意思就是最后一个a没有边框。还有一个方法，这个是最好，也是最常用的，.nav >ul >li:nth-child（7） >a { border-right:none}这里是匹配父元素的第几个子元素，你这里最后一个是第七个，所以就是7.如果你想给哪一个设置不一样的样式可以通过这个属性来设置。还有，尽量使用父子选择器，不要过多的使用后代选择器
![[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动](/aiimages/%5B%E5%89%8D%E7%AB%AF%5D%5BCSS%5D+%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E7%BA%B5%E5%90%91%E6%BB%9A%E5%8A%A8%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4%E4%B8%8E%E6%A8%AA%E5%90%91%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8.png)
