html盒子的下拉菜单,下拉菜单学习笔记

第一次写学习笔记，于是写了一个下拉导航栏

CSS样式

1、用CSS设计全局

*{

box-sizing:border-box；

padding: 0px;

margin: 0px;

}

2、设置头部区域

.header{

width:100%;

background-color:white;

font-size:30px;

padding:20px 30px;

text-align: center;

}

3、设置导航栏

.nav{

width:100%;

height: 80px;

background-color:black;

margin:0px; padding:0px;

}

.firstpage{

width: 10%;

height: 80px;

position: relative;

float: left;

}

.mainpage a{

background-color:black;

text-decoration: none;

float: left;

width: 100%;

font-size: 18px;

color: white;

line-height: 80px;

height: 80px;

text-align: center;

overflow: hidden;

}

.box-list{

display:none;

width: 100%;

background-color: black;

color: white;

}

.box-list p a{

color: white;

padding: 12px 16px;

display: block;

text-align: center;

text-decoration: none;

font-size: 18px;

line-height: 50px;}

.box-list p:hover{background-color: rebeccapurple;}

.firstpage:hover .box-list{display:block;}

HTML

导航栏

首 页

词语1

词语2

词语3

自我介绍

词语1

词语2

词语3

收 藏

词语1

词语2

词语3

效果图

问题

在写将要设置隐藏的部分的父盒子设置position:relative;

将下拉菜单栏设置position:absolute; display:none;

然后设置hover事件：当鼠标经过.mainpage盒子时,下拉菜单的display:none;变为display:block;

这些效果都实现了。但是还是有个问题就是当鼠标经过下拉菜单会出现在.mainpage盒子之上(下图所示)，最后将下拉菜单的position属性去掉，下拉菜单才不会出现上述情况

虽然说最后下拉菜单按照我想要的方式呈现出来，但是还是没有清楚到底是因为什么原因导致的。

加上position:absolute