模仿一个B站的下拉小菜单

下拉菜单

Posted by EWL on November 8, 2017

今天实在闲的蛋疼,然后就想着说复习一下html和css,毕竟前面也没咋好好看。然后就照着b站的那个挺好看的小导航,写了一个小导航,大致内容↓:

大致效果 image.png image.png 大概这样,但是总结来说,有几个点需要注意下

  1. 首先我以为必须要JS才能完成的悬浮显示二级菜单,原来直接上html和css也完全ok
  2. 其次中间卡壳了一段儿,原因是这样: 我把二级菜单的position设置为absolute之后,top值设置的离一级菜单有点远,虽然肉眼看上去勉强ok,但是对于
    #nav #list>li:hover .sub-list{
     display: block;
    }
    

    这一段代码就完全行不通了,一旦这个距离过于远,就会默认鼠标离开了一级菜单,二级菜单就完全不见了,这又怎么点?所以后来我去B站测试了一下将二级菜单的top值调大了一些,果然不行了,(重新正视html和css)

代码地址