当前位置: 首页 > Web前端 > CSS

下拉菜单学习笔记

时间:2023-03-30 22:06:57 CSS

第一次写学习笔记,所以写了一个下拉导航栏CSS样式1.使用CSS设计全局*{box-sizing:border-box;填充:0px;边距:0px;}2.设置headerarea.header{width:100%;背景颜色:白色;字体大小:30px;填充:20px30px;文本对齐:居中;}3.设置导航栏.nav{width:100%;高度:80px;背景色:黑色;边距:0px;填充:0px;}.firstpage{宽度:10%;高度:80px;位置:相对;向左飘浮;}.mainpagea{背景颜色:黑色;-装饰:无;向左飘浮;宽度:100%;字体大小:18px;白颜色;行高:80px;高度:80px;文本对齐:居中;溢出:隐藏;}.box-list{显示:无;宽度:100%;背景色:黑色;白颜色;}.box-listpa{颜色:白色;填充:12px16px;显示:块;文本对齐:居中;文字装饰:无;字体大小:18px;行高:50px;}.box-listp:hover{background-color:rebeccapurple;}.firstpage:hover.box-list{display:block;}HTML导航栏

主页

单词1

单词2

Word3

简介/div>

单词1

单词单词2

单词3

收藏夹

word1

单词2

单词3

渲染的问题是写隐藏部分的parentbox设置position:relative;将下拉菜单栏设置为position:absolute;显示:无;然后设置hover事件:当鼠标经过.mainpage框时,下拉菜单的display:none变为display:block;实现了这些效果但是还有一个问题就是当鼠标经过下拉菜单时,会出现在.mainpage框上(如下图),最后去掉下拉菜单的position属性,这样上述情况不会出现在下拉菜单中。虽然最后的下拉菜单是按照我想要的方式出现的,但是还是不清楚是什么原因造成的。添加位置:绝对