JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
<div class="clear"></div>

CSS

* {margin: 0; padding: 0;}
html {background: url(http://teststranek.kvalitne.cz/images/odrazka2n.gif) 50% 40px no-repeat;}
body{margin: 0 auto;}
ul#menu{margin: 0 auto;-moz-box-shadow: 0 0 5px #888;
 -webkit-box-shadow: 0 0 5px#888;
 box-shadow: 0 0 5px #888;height: 60px;text-align: center; }
ul#menu li{display: inline-block;height: 60px;list-style-type: none;margin-right: 30px;}
ul#menu li a{display: inline-block;font-family: Arial;padding-bottom: 2px;color: black;text-decoration: none;margin-top: 20px;-webkit-transition: all 1s;  /* Saf3.2+, Chrome */
  -moz-transition: all 1s;  /* FF4+ */
  -ms-transition: all 1s;  /* IE10 */
  -o-transition: all 1s;  /* Opera 10.5+ */
  transition: all 1s;}
ul#menu li:first-child{border-bottom: 2px solid red;}
ul#menu li:nth-child(2){border-bottom: 2px solid LimeGreen;}
ul#menu li:nth-child(3){border-bottom: 2px solid Gold;}
ul#menu li:hover a{text-shadow: gray 1px 1px 1px;}
.clear{clear: both;}