Li Element Backgrounds Not Obeying The Border Radius On Transformations

The code in the JSFiddle below creates a menu bar that has a border around it. I thought it might be nice if I added an effect on the li element when you click it to help show that

Solution 1:

It turns out that this can still be solved by using this answer but instead of placing position: relative and z-index: 1 in the li elements it should be placed in the ul parent.

ul {
  position: relative;
  z-index: 1;
  ...
}

See this JSFiddle for example of it working like it should.