Javascript Css菜单下拉列表

我目前还没有一个css菜单的想法，我想实现。我想做的是，我的菜单是向上的，而不是向下的，但我的测试是在我的列表的顶部，并且不会移动，直到我不再有我的鼠标在它上面。我现在不知道该怎么做，如果有人有什么想法，我就接受了。谢谢你今天过得愉快

.span1{
背景色：#e83737；
颜色：白色；
位置：绝对位置；
文本对齐：居中；
垂直对齐：中间对齐；
线高：60px；
顶部：413px；
左：120px；
宽度：192px；
高度：68px；
字体大小：20px；
}
.span1:悬停{
背景色：#e83737；
位置：绝对位置；
左：120px；
顶部：123px；
宽度：192px；
高度：68px；
字体大小：20px；
}
.下拉列表ul li：悬停ul{
高度：初始高度；
底部：100%；
溢出：可见；
背景：浅灰色；
}
.辍学儿童{
显示：无；
背景色：#f28c8c；
位置：绝对位置；
宽度：192px；
顶部：190px；
左：120px；
}
.辍学儿童{
颜色：白色；
填充：20px；
文字装饰：无；
显示：块；
}
.下拉：悬停.下拉子对象{
显示：块；
}

试验

不确定我是否得到了您想要实现的目标，但尝试将

.span1:hover{

更改为

。下拉：hover.span1{

子绝对块必须有相对定位的父对象。 将此添加到css中：

.dropdown {
  position: relative;
}

以及

.span1

的定位规则：

top: 0;
left: 0;

另外，一些选择器包含额外的规则和选择器

。下拉列表{
位置：相对位置；
}
.span1{
背景色：#e83737；
颜色：白色；
位置：绝对位置；
文本对齐：居中；
垂直对齐：中间对齐；
线高：60px；
排名：0；
左：0；
宽度：192px；
高度：68px；
字体大小：20px；
}
.下拉列表ul li：悬停ul{
高度：初始高度；
底部：100%；
溢出：可见；
背景：浅灰色；
}
.辍学儿童{
显示：无；
背景色：#f28c8c；
宽度：192px；
}
.辍学儿童{
颜色：白色；
填充：20px；
文字装饰：无；
显示：块；
}
.下拉：悬停.下拉子对象{
显示：块；
}

试验

Ty我稍后再试