如何仅使用CSS消除重叠边框

Question

I'm creating a sidebar menu and I encounter this overlap border problem.

HTML & CSS:

 SCSS: ul { list-style: none; width: 300px; margin: 0; padding: 0; background: #F9F9F9; li { position: relative; width: 300px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-left: 1px solid transparent; a { display: block; padding: 5px; } span { display: none; position: absolute; z-index: 1; top: 0; right: 0; } &:last-child { border-bottom: 1px solid transparent; } &:hover { border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; border-left: 1px solid red; span { display: block; background: red; } } &.active { border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; background: #FFF; } } } 

 HTML: <ul> <li><a href="#">list one</a> <span><a href="http://www.google.com" target="_blank">hidden</a></span> </li> <li class="active"><a href="#">list two</a> </li> <li><a href="#">list three</a> </li> <li><a href="#">list four</a> </li> <li><a href="#">list five</a> </li> </ul> 

JSFiddle: https://jsfiddle.net/7xjpqf2m/

Answer 1

This is tricky only because you have an .active concept going that is messing with the :hover concept. When something active is right next to something hovering, you get two borders right? I haven't played with this but maybe this will work

a.active + a:hover {
  border-top-color: transparent
}
a:hover + a.active {
  border-top-color: transparent
}

The idea being it's kinda like an if-statement. If the thing being hovered has a sibling just before it which is active, then lets not do the border top on the think hovering (that's the first rule from above). Again, haven't tried, it's just a thought

Answer 2

Simple is you just add in SASS:

ul > li{ margin:-1px }