如何在下拉菜单中更改OnMouseHover上的文本颜色

时间:2014-05-24 04:49:51

标签: html css drop-down-menu

我有一个下拉菜单。我想在执行鼠标悬停时立即更改背景和文本颜色。目前的背景颜色正在改变,而我无法更改文字颜色..

这是小提琴...... Fiddle

以下是HTML ...

               <nav>
                <ul>

                    <li><a href="#">ABOUT US</a>
                        <ul>
                            <li><a href="#">Photoshop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                            <li><a href="#">Illustrator&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                            <li><a href="#">DreamViewer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                            <li><a href="#">Web Design&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

                                <ul>
                                    <li><a href="#">HTML</a></li>
                                    <li><a href="#">CSS</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>

                </ul>

请帮我解决这个问题..

3 个答案:

答案 0 :(得分:1)

只需在课程color: #000;中添加此css nav ul ul li a:hover

 nav ul ul li a:hover{
        color: #000;(added css)
        background: #e6e6e6;
    }

希望它能帮到你。

答案 1 :(得分:0)

nav ul ul li a:hover {
  background: #e6e6e6;
  color:#INSERT HEX;
} 

答案 2 :(得分:0)

您只需添加以下代码。

nav ul li ul li:hover > a {
   color: #f00; 
}

DEMO HERE