如何实现截图中的导航鼠标悬停效果

Question

查看此照片

http://i.stack.imgur.com/liq1D.png

在鼠标上通过导航，绿色/红色div应该改变颜色。 如何实现这一点..我是html / css / js的新手！

谢谢：）

Answer 1

菜单列表应该是这样的：

<UL class="myMenu">
<LI>Home</LI>
<LI>About Us</LI>
</UL>

在CSS中，您将处理正常情况和悬停情况下的2种情况..如下所示：

.myMenu LI
{
border-bottom: 3px solid green;
/* other styles like font, color .. */
}

.myMenu LI:hover
{
border-bottom: 3px solid red;
}

最好不要让它成为div ..边框会给你相同的外观