HTML+CSS项目实践二:单纯利用CSS制作导航栏下拉菜单效果(不使用JS)

知识点:CSS属性、盒子定位、伪类选择器的使用

实现效果HTML+CSS项目实践二:单纯利用CSS制作导航栏下拉菜单效果(不使用JS)_第1张图片

 

制作思路:

1、先制作一个div盒子,用来放置导航菜单(一级菜单),设置盒子的高度和背景颜色。

2、一级菜单,使用ul无序列表制作,设置li标签浮动到一行,且取消项目符号。

3、需要设置二级菜单的li标签里,再嵌套ol标签制作。

4、二级菜单默认隐藏,只有鼠标悬浮在一级菜单上时,才会显示出对应的二级菜单。

 

 

实现代码:





鼠标滑过时,显示二级菜单