构思:这个设计完全是用纯css制作的,没有js和jQuery的添加。
html中主要有一个<div>,三个<ul>.主要显示作用是在css中。<div>作为一个盒子,大容器。三个<ul>作为占用盒子的三个小容器,通过设置<ul>和<li>的元素同在 一行上,设置<li>中的第一个z-index为1,覆盖在最上面,然后通过设置三个小容器增添背景颜色,所以以下的<li>会看不见。
用到的主要知识有:position、transition、:hover、z-index
这是没有加覆盖的背景颜色的图1
这是加了背景的图2
当你鼠标触摸到菜单栏时就有下拉的效果