html - 菜单的伪下划线选择器

Question

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

这是一个带有下划线菜单的示例网站:http://www.theblackswantheory.org/

这是我的 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;
}

那么最好的方法是什么？我尝试了几件事但效果不佳(表格，下面带下划线的另一个列表等...)

如果可能的话，我希望它是纯 CSS 而没有 javascript...我相信是这样

谢谢

Answer 1

使用底部边框模拟下划线(参见 jsfiddle ):

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