菜单的伪下划线选择器

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

ul#ul1 > li:hover{
    text-decoration:underline;
}

Answer 2

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

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

Answer 3

http://jsfiddle.net/Tymek/2P8UL/

HTML

<div id="menu">
    <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Graphic Design</a></li>
        <li><a href="#">Google Search Optimization</a></li>              
    </ul>
</div>​

CSS

#menu ul,
#menu li,
#menu a {
    background: #111;
}    

ul#menu {
    list-style: none;
}

#menu li {
    display: block;
    float: left;
}

#menu a {
    display: block;
    margin: 0 0.5em;
    padding: 15px 0 7px;
    color: #ccc;
    text-decoration: none;
    text-transform: uppercase;
    font: 13px/18px Arial, Helvetica, sans-serif;
    font-weight: 300;    
}

#menu a:hover {
    color: #fff;
    padding-bottom: 4px;
    border-bottom: 3px solid #f00;
}

Key part:

#menu a {
    padding: 15px 0 7px;  
}

#menu a:hover {
    padding-bottom: 4px;
    border-bottom: 3px solid #f00;
}

Next time use firebug, or something to analize your example. ​