CSS Case Study 1

HTML

<ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Stuff</a></li>
    <li><a href="#">Gossip</a></li>
    <li><a href="#">Junk</a></li>
</ul>

CSS

body { padding:50px 20px; font-family:arial,helvetica,sans-serif; background-image:url(http://subtlepatterns.com/patterns/purty_wood.png); }
a { text-decoration:none; }

ul {float:left;} /*this will float the ul to right*/
li {float:left;} /*this will float the li to left */
a{ padding:5px 10px; font-weight:bold; color:rgba(255,255,255,0.5);
     -webkit-transition:all 0.5s linear;} /* this will add space to the links */
a:hover{color: #fff;}
li:hover{background-color:rgba(255,255,255,0.3); border-radius:14px}