CODEWITHSUNDEEP
htmlcss
ralph aleman
ralph aleman

Reputation: 3

How to eliminate the overlap border using CSS only

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

Preview Image

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/

Upvotes: 0

Views: 3290

Answers (2)

Zuhaib Siddiqui
Zuhaib Siddiqui

Reputation: 56

Simple is you just add in SASS:

ul > li{ margin:-1px }

Upvotes: 2

Brad Westfall
Brad Westfall

Reputation: 56

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

Upvotes: 0

Related Questions