两级菜单，设置 text-decoration 属性答案

【问题标题】：Two level menu, setting text-decoration property两级菜单，设置 text-decoration 属性
【发布时间】：2013-06-28 00:26:57
【问题描述】：

好的，这听起来有点傻，我不知道这是 css 中的某种错误还是什么，但是当我尝试创建两级菜单时，第一级的项目有 text-decoration 属性设置为 underline，我找不到在第二个项目上将 text-decoration 设置为 none 的方法等级。

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

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

【问题讨论】：

在第二层使用float也可以解决你的问题<li style="text-decoration:none; float:left;">subitem1</li>

标签： html css text-decorations

【解决方案1】：

您可以将子项更改为

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

这应该会为您解决问题。

但是，滥用 !important 规则可能不是最好的方法。从长远来看，更好的策略是使用 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;
}

【讨论】：

【解决方案2】：

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

.main-nav > li {text-decoration:underline;} -- 这样，css 将仅适用于第一级列表或父项。请注意，这不适用于其他子列表。

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

http://jsfiddle.net/qL3Bp/

【讨论】：