Question

好吧，这听起来很傻，我不知道这是css中的某种bug还是什么，但当我尝试创建两级菜单时，第一级的项目有文本装饰属性设置为下划线，我找不到在第二个项目上将 text-decoration 设置为 none 的方法水平。

<ul>
<li style="text-decoration:underline;">item1 
    <ul>
        <li style="text-decoration:none;">subitem1</li>
        <li>subitem2</li>
    </ul>
</li>
</ul>

有谁知道为什么会这样，我该如何解决？

Answer 1

您可以将子项更改为

<li style="text-decoration:none !important;">subitem1</li>

应该为你解决。

然而滥用重要规则可能不是最好的方法。从长远来看，更好的策略是使用CSS文件并将类属性添加到li元素。

类似的东西：

<强> HTML

<ul>
<li class="main-item">item1 
    <ul>
        <li class="sub-item">subitem1</li>
        <li>subitem2</li>
    </ul>
</li>
</ul>

<强> CSS

.main-item {
    text-decoration:underline;
}

.sub-item {
    text-decoration:none;
}

Answer 2

这很简单，首先要明白如果你将text-decoration:underline;提供给第一级列表项，那么相同的css属性将会申请给孩子，所以你可以做的是

.main-nav＆gt; li {text-decoration：underline;} - 用这个css只会申请第一级列表或父项。请注意，这不适用于其他子列表。

有了这个，你不需要为子列表添加css

http://jsfiddle.net/qL3Bp/

两级菜单，设置文本装饰属性

2 个答案: