Question

I have a horizontal list menu, on which I want to use pseudo selectors: When you hover over the menu item, it should have a thick color underline. Each Menu item have a different width and its underlining effect should match that width

Here is a sample website with its underlining menus: http://www.theblackswantheory.org/

Here is my list:

<div id="other">
  <div id="otherTable">
    <ul id="ul1">
        <li>Web Design</li>
        <li>Graphic Design</li>
        <li>Google Search Optimization</li>              
    </ul>
  </div>
</div>

CSS:

#otherTable{
    display: table;
    margin: 0 auto;
}
#otherTable ul{
    list-style: none;
}
#otherTable ul li{
    display: inline;
    margin: 10px;
}
ul#ul1{
    color: #fff;
}

So what is the best way of going about this? I tried several things but does not work well (tables, another list below with the underlines etc…)

I would like it pure CSS and no javascript if possible…Which I believe it is

Thank You

Answer 1

Use a bottom border to simulate an underline (see jsfiddle):

#otherTable ul li:hover {
  border-bottom: solid red 0.2em;
}