Html 菜单的伪下划线选择器

我有一个水平列表菜单，我想在上面使用伪选择器：当您将鼠标悬停在菜单项上时，它应该有一个粗的彩色下划线。每个菜单项具有不同的宽度，其下划线效果应与该宽度匹配

以下是一个带有下划线菜单的示例网站：

以下是我的清单：

<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，没有javascript，如果可能的话…我相信它是

---

谢谢

使用底部边框模拟下划线（请参阅）：

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

---

使用底部边框模拟下划线（请参见）：

HTML

关键部分：

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

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

下次使用firebug或其他东西来分析您的示例。 ​

HTML

关键部分：

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

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

下次使用firebug或其他东西来分析您的示例。

---

​

谢谢你的评论。但是下划线样式只有一个设定的线条高度……或者你能调整线条的粗细吗？谢谢你的评论。但是下划线样式只有一个设定的线条高度……或者你可以调整线条的粗细吗？

<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>​

#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;
}

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

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