0

疑似セレクターを使用したい水平リスト メニューがあります。メニュー項目にカーソルを合わせると、太い下線が表示されます。各メニュー項目の幅は異なり、下線効果はその幅に一致する必要があります

以下は、下線付きメニューのあるサンプル Web サイトです: 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

下線をシミュレートするには、下の境界線を使用します ( jsfiddleを参照)。

#otherTable ul li:hover {
  border-bottom: solid red 0.2em;
}
于 2012-11-01T14:00:55.267 に答える
1 
ul#ul1 > li:hover{
    text-decoration:underline;
}
于 2012-11-01T13:51:05.847 に答える
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;
}

次回はfirebugなどを使用して例を分析してください。</p>

于 2012-11-01T14:14:19.313 に答える