以京东导航条来练习，导航条的制作可以采用浮动或者弹性布局，这里采用浮动，要注意高度塌陷的问题。这里简单仿写一下
下面实现鼠标移动到江苏实现下拉菜单的实现，首先要有一个下拉菜单，设置好宽高，把他隐藏起来，开启定位调整他的位置。
.city{ width: 200px; height: 400px; display: none; position: absolute; left: 30px; top: 30px; }接下来设置鼠标经过整个left这个div显示下拉菜单，但是下拉菜单显示后，鼠标在下拉菜单停留的时候下拉菜单也应该显示，所以要同时把下面的子元素city一同设置这个效果。加点边框阴影修饰一下。仅仅是想移动到江苏两个字上显示，那就选择a同时设置兄弟元素city
.left:hover .city{ display: block; border: 1px solid grey; box-shadow: 5px 5px black; }这个时候我们发现下面的下拉菜单会盖住上面，如图
这里我们可以利用开启定位后的z-index,使得上面的元素覆盖住下拉菜单，
.city1{ position: relative; padding-bottom: 5px; z-index: 1; /* 盖住下面的边框 */ }
这里我们还要考虑一个问题，就是下拉菜单下面如果还有元素，会不会把下拉菜单盖住，所以我们可以把下拉菜单的优先级设置高一些。这里没有其他元素就不设置了。
最后附上整体源码
Document
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/210953.html原文链接：https://javaforall.net
