(如有错敬请指点,以下是我工作中遇到并且解决的问题)
效果图 :
可以通过 https://littlehiuman.github.io/07-menus/ 查看效果。
https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~
点击各个菜单(自助餐、中山二三路、智能排序)会显示/隐藏二级菜单(二级菜单可能既有左侧内容也有右侧内容(三级菜单),也可能只有左侧内容)
CSS:
* { margin: 0; padding: 0; } li { list-style: none; } .menu { width: 100%; height: 20px; background: #fff; border-bottom: 1px solid #ddd; overflow: hidden; padding: 8px 0; } .menu_con { text-align: center; border-right: 1px solid #ddd; width: 33%; height: 20px; line-height: 20px; float: left; cursor: pointer; } .menu_fo