- 首先创建一个新的html，在body下面写入一个标签为menu的div标签作为外部的一个大盒子
- 在这个大盒子写入一个标签题目，也称之后主题，在这里必须用h2或者h3标签来命名，或者利用其它标签，然后再其他标签内用css代码来编辑一样也可以的
- 然后在h3标签内下方再写一个div名为itemBox，这个div是显示内容的，有标题有内容才是新闻嘛，当然，这个内容区域我比较推荐使用ul和li标签来搭配使用
- 这时候我们的第一个内容也完成了，然后再头部样式中写入我们要编写的css代码，首先我们还是一样，用一个通配符*用来获取body内的全部元素标签，写入外边距和内边距都为0个像素
- 然后再标签中改一下字体颜色，首先，先获取这个div的类名.menu，记得要在前面加个.然后再后面在添加个h3，意思是这个标签下面的h3标签，字体颜色按个人喜好
- 然后我们在这个大的盒子内写入基本的样式，宽外边距，文本居中还有一个背景色，
- 然后我们编写一下内容区的样式ul，首先先把li自带的效果把它去掉，然后设置宽，宽要和外部的大盒子的宽要一样宽，然后设置高为0，背景颜色，还有一个是overflow超出部分隐藏，最后一个就是过渡效果，这里的话我们效果是移入后是li标签从上显示到下，所以我们这里的话设置一个height就可以了然后后面设置过渡时间为3秒，动作为ease以慢结束就可以了
- 选择我们设置li标签的文字内容为居中，所以的话这里我们用行高属性来吧文字居中就行了
- 最后我们设置一下最后ul标签悬停效果，效果为移入鼠标改为点击，还有将高改为90px
- 最后将源代码的内容itembox多复制几个来显示效果更明显
这是我所学到的点击隐藏显示效果了，所以我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！
相关文章
- 10-23爬虫 ， 定时发菜单 pass 10
- 10-23IDEA通过help菜单修改配置打不开问题
- 10-23缓动动画-手风琴/
- 10-23vue 树形菜单 右击自定义菜单 问题
- 10-23修改grub引导菜单等待时间
- 10-23为grub菜单设置密码（进单用户）
- 10-23系统安全及应用（三） grub菜单限制
- 10-23Python初学者第十三天 三级菜单程序小作业
- 10-23wordpress 傻瓜式美化：简单的一行代码立即让您的菜单小图标旋转起来
- 10-23NX二次开发-菜单