css层右边竖分割线,css 要求有右边要有一个分割线，同时hover的时候就消失。最好的是不要用js...

这个是我目前的效果图，就是让左边的border没有，没有hover时就显示，有的时候就消失

这是我的源码

菜单的demo

.container a{

padding: 0 25px;

border-right: 1px solid #ccc;

display: inline-block;

height: 30px;

}

.container{

border-bottom: 1px solid #ccc;

border-top: 2px solid #ccc;

height: 35px;

line-height: 35px;

background-color: #f7f7f7;

}

a{

font-weight: bold;

color: #6f6f6f;

text-decoration: none;

margin-top: 2px;

}

a:hover{

border-left: 1px solid #ccc;

border-right: 1px solid #ccc;

height: 40px;

border-top: 2px solid #ff5757;

color: #ff5757;

background-color: #fff;

position: relative;

top: -6px;

}

a:first-child{

border-left:1px solid #ccc;

}

菜单一

菜单二

菜单三

菜单四

方便大家调试。