CodePen

HTML

            
              

<nav>
	<ul>
    <li><a href="#">Primary Text</a></li>
    <li><a href="#">Primary Text</a></li>
    <li><a href="#">Primary Text</a></li>
    <li><a href="#">Primary Text</a></li>    
	</ul>
</nav>
<img src="http://support.microsoft.com/Library/Images/2777435.png">
            
          
!

CSS

            
              * {
    box-sizing:border-box;
}

body {
  width: 260px;
  text-decoration: none;
}

ul{
  list-style: none;

}

nav {
  font-size: .75em;
  font-family: 'Open Sans', sans-serif;
  color: #222;
  padding:10px 0;
  background:lightgrey;
  width: 19.333em;
  margin:10px;
}

li{
  margin-bottom:10px;

}

a {
  color:black;
  line-height:3.5em;
  width: 100%;
  text-decoration:none;
  font-weight:bold;
  display:block;
  padding-left:10px;
    position:relative;
}

a:hover {
  color:white;
  background-image: radial-gradient(50% 50%, ellipse farthest-corner, rgba(0, 0, 255, 0.15) 0%, rgba(0, 0, 255, 0.95) 100%);
  
}

a:hover:after{
  content:"";
  position:absolute;
  top: .5em;
  left: 18.33em;
  width: 0; 
	height: 0; 
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent; 
	border-right: 1em solid white; 
}

 
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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