html - 悬停时将 CSS 菜单标题悬停属性更改为橙色

Question

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

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>

Answer 1

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

<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)