首先，怎么隐藏。
这很简单，你把元素的 display 属性设置为 none 就行了。相反的，设置为 block （根据具体情况选择对应的值）就显示出来了。
然后我们希望它何时显示？适当我们的鼠标移动到一级菜单的菜单项上，它里面的二级菜单才显示。
所以：
nav>ul>li>ul {display: none;position: absolute;top: 0;left: 100%;z-index: 10;width: 120px;padding: 10px;margin: 0;background-color: rgba(0, 0, 0, 0.8);color: #DDDDEE;}nav>ul>li:hover>ul {display: block;}那么要注意是哪个元素的 hover 状态。
这么简单？就这么简单。那现在考考你哦，为啥我把鼠标移动到二级菜单上，它不会消失，明明鼠标已经移出了 li 的范围。
二级菜单的 ul 写在一级菜单的 li 里面的作用很多。首先在道理上说，是包含关系，这样写结构上很合理。然后上面的 CSS 选择器也可以成立，否则单靠 CSS 可能无法实现了。而定位的时候以父元素为参照，也是相对于上级菜单定位，就不会混乱……
现在呢，二级菜单就是这个一级菜单项的一部分，它是飘出去了，但它依然是父元素的一部分。所以当鼠标在它上面的时候，包含它的 li 元素依旧处于 hover 状态。
在位置上，这两个元素是无缝衔接的，所以我们可以把鼠标移动到子元素上，并不改变父元素的 hover 状态。那如果我们把二级菜单定位的稍微远一些的话，又会怎样呢？大家动手试试效果吧。
那么三级菜单呢？依然这样延续下去就行了，我就不写了。不过如果变通一下，我写个无限延续下去的……长龙，每个触发位置又比较小，是不是就成了一个考验耐心的游戏？
所以，开开脑洞什么的很好玩，别怕出错，不出错才学不会东西呢。何况又不是在学校，出问题了没人打没人骂没人指责也不花钱……你还怕啥？现在不去遇到各种问题，积累足够的经验，难道要等到工作中翻车？喵唧，这账大家应该都算的清楚的。
然后说一下优化，目前鼠标划过菜单并没有变化效果，这不美观，也没有给用户“这里是可以进行交互的”暗示，所以我们应该给它设置一些变化，不需要很大的变化，只要足够让用户发现，温和的变化就好。比如背景颜色，边框什么的。
如果你想使用粘性固定来保证导航栏一直显示。那么首先你要在下面添加内容，这样让页面可以滚动，我们才能测试。
nav {position: -webkit-sticky;top: 0;text-align: center;background-color: #DDDDEE;}-webkit- 是一个前缀，因为 sticky 并没成为正式的规范，所以浏览器可能不支持它，也可能支持它。但是支持的方式可能是用私有的方式支持，就是某个浏览器给出一个自己独有的值，来实现相同的效果，这样避免了一些可能的冲突。而这个独有的值如果乱取名字就很混乱，也不容易理解。所以一般都是在名字前面加上这个浏览器的前缀，这样既知道是针对于哪个浏览器，又知道是什么，就很科学。这种方式不止在属性值中使用，更多的是在属性名中使用。不过现在随着浏览器厂商都在努力更新，兼容新技术，统一标准。这种东西用的就越来越少了，作为了解就好，初期可以不去考虑这些事情，以后，还有很多工具可以辅助完成这些事情。
暂无评论内容