CSS实现常用菜单(二)

2、变幻菜单

下面我们来实现如下图所示的菜单,我们将她称之为变幻菜单,把鼠标移入到当前菜单上,菜单的字体内容,颜色,背景颜色都发生改变。其他菜单不发生任何改变。

这里我们是通过html+css来实现这种变幻的菜单效果

html代码

最外层是一个div,在div的里面包含的ul的li就是用来显示菜单,每个li里包含a标签,首页,课程大厅,学习中心,关于我们。每个a标签里面包含一个span标签,span标签包含的就是当鼠标移入到菜单后,显示的新的菜单。

css代码

你可能感兴趣的:(CSS实现常用菜单(二))