0

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

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

这是我的清单：

<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 ......我相信它是

谢谢你

4

3 回答 3

1 
ul#ul1 > li:hover{
    text-decoration:underline;
}
于 2012-11-01T13:51:05.847 回答
1

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

#otherTable ul li:hover {
  border-bottom: solid red 0.2em;
}
于 2012-11-01T14:00:55.267 回答
1

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

关键部分：

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

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

下次使用萤火虫，或其他东西来分析你的例子。​</p>

于 2012-11-01T14:14:19.313 回答