Javascript HTML/CSS中的下拉列表

我正在尝试用html和css（以及稍后的js）创建我的第一个网站。我想制作一个带有下拉菜单的计算器，但我正在努力制作下拉菜单，因为当它悬停在上面时，下拉列表覆盖了菜单

。重定向：悬停{
背景色：#aac8ff；
}
div{
背景色：#ccd9fb；
}
h1{
字体大小：20px；
}
.下拉内容a{
背景色：#aac8ff
}
.container:悬停。下拉内容{
显示：块
}
.下拉列表内容a：悬停{
背景色：#99b7ff；
}
集装箱{
显示：内联
}
李{
显示：内联；
}
身体{
背景色：#eefbfb；
}
.top h1，
.顶级ul{
显示：内联块；
垂直对齐：顶部；
}
.重定向{
文字装饰：无；
字体大小：20px；
显示：块；
浮动：对；
颜色：#fff；
宽度：125px；
文本对齐：居中；
左边框：1px实心#eefbfb；
填充：14px；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
浮动：对；
}
.下拉内容{
显示：无；
位置：绝对位置；
z指数：1；
最小宽度：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
背景色：#99b7ff；
}
.下拉内容a{
颜色：#fff；
显示：块；
文字装饰：无；
文本对齐：居中；
}

123计算器

您的

。下拉内容

具有位置绝对，将

顶部

css规则添加到该选择器，并将下拉内容元素向下推到主导航下方

位置：绝对

~元素相对于其第一个定位（非静态）的祖先元素定位。这将允许您设置顶部、左侧、右侧和底部

。重定向：悬停{
背景色：#aac8ff；
}
div{
背景色：#ccd9fb；
}
h1{
字体大小：20px；
}
.下拉内容a{
背景色：#aac8ff
}
.container:悬停。下拉内容{
显示：块
}
.下拉列表内容a：悬停{
背景色：#99b7ff；
}
集装箱{
显示：内联
}
李{
显示：内联；
}
身体{
背景色：#eefbfb；
}
.top h1，
.顶级ul{
显示：内联块；
垂直对齐：顶部；
}
.重定向{
文字装饰：无；
字体大小：20px；
显示：块；
浮动：对；
颜色：#fff；
宽度：125px；
文本对齐：居中；
左边框：1px实心#eefbfb；
填充：14px；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
浮动：对；
}
.下拉内容{
显示：无；
位置：绝对位置；
顶部：58px；
z指数：1；
最小宽度：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
背景色：#99b7ff；
}
.下拉内容a{
颜色：#fff；
显示：块；
文字装饰：无；
文本对齐：居中；
}

123计算器

在

第3行

中，您有一个

结束标签，您从未打开过它。