0

http://jsfiddle.net/Lqvcr/53/

これは非常に基本的なことであり、それを機能させる方法がわかりません。

ドロップダウンリストのアンカーに下線がない状態で、.selectedクラスに下線を付けたままにするにはどうすればよいですか？

HTML：

<ul id="nav">
    <li>
        <a href="about.html">about</a>
    </li>
    <li>
        <a href="about.html">about</a>
    </li>
    <li class="selected">
        <a href="work.html">Work</a>
        <ul id="second" class="vis">
            <li>
                <a href="graphicdesign.html">Graphic Design</a>
            </li>
            <li>
                <a href="illustrations.html">Illustrations</a>
            </li>
        </ul>
    </li>
    <!-- etcetera -->

CSS：

ul#nav {
    position: relative;
    margin-left: 0;
    padding-left: 0;
    display: inline;
}
ul#nav li {
    margin-left: 0;
    padding: 3px 15px;
    list-style: none;
    display: inline;
}
ul#nav li.first {
    margin-left: 0;
    border-left: none;
    list-style: none;
    display: inline;
}
ul#second {
    position: absolute;
    right: -57px;
    display: none;
}
.selected {
    text-decoration: underline;
}
.selected:hover ul#second {
    display: block;
}
.selected:hover ul#second li a {
    display: block;
}
a {
    text-decoration: none;
}
4

3 に答える 3

3

この行を変更するだけです：

.selected a{text-decoration:underline;}

これのために：

.selected > a{text-decoration:underline;}
于 2012-05-24T08:53:57.387 に答える
1

必要なリンクに下線を引くセレクターをより具体的に指定すると、下線を付けたくない他のアイテムを簡単に選択できるようになります。私が変更され

.selected {text-decoration:underline;}

に：

.selected a {text-decoration:underline;}

また、text-decoration: none;次のように追加しました。

.selected:hover ul#second li a {display:block; text-decoration: none;}

jsfiddleで動作するのを見てください

于 2012-05-24T08:31:50.080 に答える
0

セレクターのルールを宣言し、.selected下位レベルの要素に対してそれをオーバーライドする必要があります。

.selected（ ）の目的のスタイルはユーザーエージェントのデフォルトであるため、いくつかの宣言text-decoration: underlined;を省略しました。text-decorationあとは、高い特異性で定義された低レベルの要素のルールを追加するだけです。

.selected:hover ul li a {
    text-decoration: none;
}

これが、デモ用に更新されたjsFiddleです。

于 2012-05-24T08:35:12.430 に答える