Adding border on mouseover moves content

I want to add a border on mouse over and click but it is moving all the content down whenever it adds the border.

<div class="sections">
  <ul class="sidea">
    <li class="active categoryb"><a href="#">Featured</a>
    </li>
    <li class="categoryb"><a href="#">Most Popular</a>
    </li>
    <li class="categoryb"><a href="#">Recent</a>
    </li>
  </ul>
  <div class="clear"></div>
</div>

CSS

.categoryb {
  float: left;
  width: 33.33%;
  padding: 0;
  text-align: center;
}
.sections {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.selecteda {
  border: 3px solid black;
  margin: 0;
  padding: 0;
}
$('.categoryb').on({
  mouseover: function () {
    $(this).addClass('selecteda');
  },
  mouseleave: function () {
    $(this).not('.selected1a').removeClass('selecteda');
  },
  click: function () {
    $('.categoryb').removeClass('selected1a').not(this).removeClass('selecteda');
    $(this).addClass('selected1a');
  }
});

Live Example: http://jsbin.com/ravavazazo/1/edit?html,css,js,output


solution

You could add box-sizing: border-box to the elements in order to include the border in the element’s width/height calculations. Prior to this, the elements would be occupying more than 100% of the space because 3 * 33% + 6px != 100% (due to the 3px borders on each side that are not included in the element’s dimension calculations).

Updated Example

.categoryb {
  float: left;
  width: 33.33%;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  border: 3px solid transparent;
}

You could also add a 3px transparent border around the elements for displacement in order to prevent the element from moving on hover.