CodePen

HTML

            
              <ul class="inlineAb myNav">
  <li><a href="#">Nav Item 1</a></li>
  <li><a href="#">Nav Item 2</a></li>
</ul>
            
          
!

CSS

            
              /* inline-block abstraction */
.inlineAb {
	margin-left: 0;
	font-size: 0;
	list-style: none;
}
	.inlineAb > li , .inLineAb > li > a {
		display: inline-block;
		*display:inline;
		*zoom:1;
		font-size: 12px;
	}

/* myNav */
.myNav {
margin: 8px 0;
}
  .myNav li + li {
   margin: 0 0 0 0;
   /*margin: 0 0 0 -15px;*/ /* issue */
  }
   .myNav a {
    position: relative;
    display: block;
    padding: 5px 48px 10px 18px;
    margin: 0 0 0 0;
    color: #FFF;
    background: #48bcec;
    font-size: 17px;
    text-decoration: none;
   }
   .myNav a:hover {
    background: #00aaea;
   }
   .myNav a:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 0px;
    border-top: 35px solid #48bcec;
    border-bottom: none;
    border-right: 35px solid #FFF;
    font-size: 0px;
    line-height: 0%;
   }
   .myNav a:hover:after {
    border-top: 35px solid #00aaea;
   }
   .myNav li + li a {
    padding-left: 43px;
   }
   .myNav li + li a:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 0px;
    border-top: 35px solid #FFF;
    border-bottom: none;
    border-right: 35px solid #48bcec;
    font-size: 0px;
    line-height: 0%;
   }
   .myNav li + li a:hover:before {
    border-right: 35px solid #00aaea;
   }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................