title: UL LI selected in horizontal CSS menu
body: <p>I have This Menu For Horizontal Menu. How To generate css for selected  <code>li</code> or <code>a.li</code>.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;ul class="arrowunderline"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;New&lt;/a&gt;&lt;/li&gt;
  &lt;li class="selected"&gt;&lt;a href="#"&gt;Revised&lt;/a&gt;&lt;/li&gt; &lt;!-- IF a.LI selected &lt;a class="selected" &gt; END --&gt;
  &lt;li&gt;&lt;a href="#"&gt;Tools&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Forums&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul.arrowunderline{
  list-style-type:none;
  margin:0;
  padding:0;
  text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
  font: bold 16px Georgia;
      margin-top: 60px;
  }
  
  ul.arrowunderline li{
  display:inline;
  margin-right:25px; /* spacing between each menu item */
  }
  
  ul.arrowunderline li a{
  position:relative;
  color:black;
  padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
  text-decoration:none;
  
  }
  
  ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
  content:'';
  position:absolute;
  left:50%;
  margin-left:-75px;
      margin-top: -60px;
  width:150px;
      height:40px;
  background:url(http://i.stack.imgur.com/7jpU4.png) center bottom no-repeat;
  }
  </code></pre>
  
  <p>UPDATE : Online Demo: <a href="http://jsfiddle.net/uc6Yz/2/" rel="nofollow">http://jsfiddle.net/uc6Yz/2/</a></p>