3

如何使菜单类别颜色属性在悬停时变为橙色，而不是在悬停其他子项时保持橙色？这太棘手还是我不够清楚？请告诉我。谢谢你的帮助。

jsfiddle：http: //jsfiddle.net/LmWk2/

<nav class="main-nav">
<ul>
<li class="menu-category">Title 1
<ul>
<a href="#"><li class="menu-item">Item 1</li></a>
<a href="#"><li class="menu-item">Item 2</li></a>
<a href="#"><li class="menu-item">Item 3</li></a>
<a href="#"><li class="menu-item">Item 4</li></a>
</ul>
</li>
<li class="menu-category">Title 2
<ul>
<a href="#"><li class="menu-item">Item 1</li></a>
<a href="#"><li class="menu-item">Item 2</li></a>
<a href="#"><li class="menu-item">Item 3</li></a>
<a href="#"><li class="menu-item">Item 4</li></a>
<a href="#"><li class="menu-item">Item 5</li></a>
</ul>
</li>
<li class="menu-category">Title 3
<ul>
<a href="#"><li class="menu-item">Item 1</li></a>
<a href="#"><li class="menu-item">Item 2</li></a>
<a href="#"><li class="menu-item">Item 3</li></a>
<a href="#"><li class="menu-item">Item 4</li></a>
<a href="#"><li class="menu-item">Item 5</li></a>
</ul>
</li>
<li class="menu-category">Title 4
<ul>
<a href="#"><li class="menu-item">Item 1</li></a>
<a href="#"><li class="menu-item">Item 2</li></a>
<a href="#"><li class="menu-item">Item 3</li></a>
<a href="#"><li class="menu-item">Item 4</li></a>
</ul>
</li>
</ul>
</nav>
4

2 回答 2

2

最简单的方法是添加另一个仅包含标题的元素：

<li class="menu-category"><span class="menu-category-title">Title 1</span>

.menu-category-title:hover {
    color: orange;
}

http://jsfiddle.net/ExplosionPIlls/LmWk2/1/（对于 TITLE1）

于 2013-06-24T16:16:54.877 回答
1

我的回答解决了悬停时颜色更改问题以及使链接表现得像按钮（块状）而不是文本链接的相关问题。

正如前一篇文章所指出的，将标题标签包装在一个容器中是个好主意，我选择了，h4但几乎任何事情都可以。此外，出于语义原因，但列表项标签内的链接标签：

<nav class="main-nav">
    <ul>
        <li class="menu-category"><h4>Title 1</h4>
            <ul>
                <li class="menu-item"><a href="#">Item 1</a></li>
                <li class="menu-item"><a href="#">Item 2</a></li>
                <li class="menu-item"><a href="#">Item 3</a></li>
                <li class="menu-item"><a href="#">Item 4</a></li>
            </ul>
        </li>
        ...
        ...
        ...
    </ul>
</nav>

CSS 的基本更改如下。

对于标题文本：

.main-nav ul li.menu-category h4 {
    margin: 0;
    display: inline-block;
    padding:5px 15px 8px 15px;
    font-weight: normal;
}
.main-nav ul li.menu-category h4:hover {
    color:#FB8521;
}

这里的技巧是设置display: inline-block为包装标题文本的元素。因为我选择使用h4，所以我需要将边距归零并将 font-weight 设置为 normal 以保持您之前的样式。此外，添加填充以使文本区域变大，这样您就可以触发悬停效果而无需实际将鼠标悬停在文本上。

对于子菜单项，将a标签设置为 have display: block，这样链接的活动区域就会填满子菜单面板的宽度。根据需要添加填充。

.menu-category .menu-item a {
    display: block;
    padding: 5px 15px;
}
.menu-category .menu-item a:hover {
    color:#FB8521;
}

您可以在以下位置查看工作演示：http: //jsfiddle.net/audetwebdesign/jvgkG/

附言

关于悬停的工作方式，此布局具有灵活性。我假设当您将鼠标移到二级菜单项上时，标题文本会恢复为白色，但我可以将其设置为当您在二级菜单上移动时标题保持橙色。

此外，您可以根据需要设置默认链接颜色的样式。

于 2013-06-24T17:04:20.480 回答