Edit in JSFiddle

<header>
  <ul>
    <li>
      test1
    </li>
    <li>
      test2
    </li>
  </ul>
</header>
$fontcolor:#5265a4;
@mixin bgcolor {
  background-color:$fontcolor;
}


header{
      ul{
        margin:0 auto;
        list-style:none;
        width:100%;
        height:50px;
        @include bgcolor;
          li{
          float:left;
          display:inline-block;
          text-align:center;
          color:white;
          width:50%;
          line-height:50px;
            &:hover{
              font-weight:bold;
              background-color:$fontcolor*2;
              color:$fontcolor;
              height:49px;
            }
          }
        }
      }