这次我们学习到的是用HTML和css制作下拉式菜单栏。
这次还是像滑动手风琴一样需要引用图标。
引用图标库
先对菜单进行布局，用多个div进行布局，再向div中添加<ul><li>当做下拉栏
布局代码
未添加css效果
css
1.需要注意的是选择器的使用，如下拉栏需要选择的是id中的ul中的li。
2.运用hover实现鼠标移入时的栏目样式，之前需要用text-decoration:none对下拉文本进行隐藏
3.因为没有用到超链接，则需添加在移入是的鼠标样式，即cursor：pointer，设置移入时鼠标为手指样式
hover效果展示
4.用@media设置当宽度减小时菜单栏的样式变化
最大宽度小于700px时菜单栏变化
缩放后菜单栏效果
ps:本次作业难度不大，但选择器的使用即div的嵌套较多，容易造成嵌套顺序不对，使样式发生变化。总体来说对界面布局仍需要多多练习。
