title: Changing underline color with css doesn't work in chrome?
body: <p>I am trying to change the underline color during a hover event using spans and it works in IE9 and Firefox 13.01 but it doesn't work in Chrome (it should underline in gold). </p>
  
  <p><code>#menu li:hover span.underline {
      text-decoration:underline;
      color: #FAA301;  }</code></p>
  
  <p><code>&lt;ul id="menu"&gt;
      &lt;li style="z-index: 7;"&gt;&lt;span class="underline"&gt;&lt;a href="#"&gt;link1&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;</code></p>
  
  <p>Here is js.fiddle: <a href="http://jsfiddle.net/wuUpL/7/" rel="nofollow noreferrer">http://jsfiddle.net/wuUpL/7/</a> . </p>
  
  <p>I originally got the idea from this post <a href="https://stackoverflow.com/a/1175402/1490248">https://stackoverflow.com/a/1175402/1490248</a> but that one doesn't work in chrome either.</p>
  
  <p>Note: I don't want to use borders to fix this, I am already using borders as a border</p>
  
  <p>Can anyone help me out here? Is there some sort of chrome hack/exception I could use to fix this?</p>