Question

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

以下是一个带有下划线菜单的示例网站：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 ...我相信它是

谢谢

Answer 1

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

Answer 2

使用下边框模拟下划线（请参阅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;
}

关键部分：

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

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

下次使用萤火虫或其他东西来分析你的例子。

用于菜单的伪下划线选择器

3 个答案: