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;}
ul#menu{-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; margin: 0 15px;}
ul#menu li a{display: inline-block;font-family: Arial;padding-bottom: 22px;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 a{border-bottom: 2px solid red;}
ul#menu li:first-child+li a{border-bottom: 2px solid limegreen;}
ul#menu li:first-child+li+li a{border-bottom: 2px solid gold;}
ul#menu li:hover a{text-shadow: gray 1px 1px 1px;}
.clear{clear: both;}