Html 带子菜单的居中CSS菜单

我想有一个中心的CSS菜单与子菜单。我可以做它的一部分（主菜单），但我在显示子菜单时有问题。当我悬停主菜单项以显示其子菜单时，问题开始出现

*{
字体系列：arial；
}
#菜单{
高度：65px；
背景:#f3；
文本对齐：居中；
}
#菜单ul{
列表样式：无；
文本对齐：居中；
保证金：0；
填充：0；
位置：相对位置；
顶部：15px
}
#菜单ulli{
列表样式：无；
文本对齐：居中；
左边距：5px；
右边距：5px；
显示：内联；
}
#菜单ulli a{
填充：4px10px 6px 10px；
边界半径：3px；
显示：内联块；
颜色：#666；
过渡：均为0.3秒；
}
#菜单ul li a:悬停，#菜单ul li a:聚焦，#菜单ul li a.激活{
背景：#58c071；
颜色：白色；
}
.子菜单{
显示：无；
位置：绝对位置；
顶部：5px；
宽度：200px；
背景：白色；
}
#菜单li:hover>ul{
显示：块
}

试试这个：

.submenu

通过

#菜单ul li>获取您的
ul
目标的css。submenu

并将

位置：相对
添加到
li


*{
字体系列：arial；
}
#菜单{高度：65px；
背景:#f3；
文本对齐：居中；
}
#菜单ul{
列表样式：无；
文本对齐：居中；
保证金：0；
填充：0；
位置：相对位置；
顶部：15px
}
#菜单ulli{
列表样式：无；
文本对齐：居中；
左边距：5px；
右边距：5px；
显示：内联；
位置：相对位置；
}
#菜单ulli a{
填充：4px10px 6px 10px；
边界半径：3px；
显示：内联块；
颜色：#666；
过渡：均为0.3秒；
}
#菜单ul li a:悬停，#菜单ul li a:聚焦，#菜单ul li a.激活{
背景：#58c071；
颜色：白色；
}
#菜单ul li>。子菜单{
显示：无；
位置：绝对位置；
顶部：24px；
宽度：200px；
背景：白色；
左：0；
}
#菜单li:hover>ul{
显示：块
}












试试这个：

.submenu
通过
#菜单ul li>获取您的
ul
目标的css。submenu
并将
位置：相对
添加到
li


*{
字体系列：arial；
}
#菜单{高度：65px；
背景:#f3；
文本对齐：居中；
}
#菜单ul{
列表样式：无；
文本对齐：居中；
保证金：0；
填充：0；
位置：相对位置；
顶部：15px
}
#菜单ulli{
列表样式：无；
文本对齐：居中；
左边距：5px；
右边距：5px；
显示：内联；
位置：相对位置；
}
#菜单ulli a{
填充：4px10px 6px 10px；
边界半径：3px；
显示：内联块；
颜色：#666；
过渡：均为0.3秒；
}
#菜单ul li a:悬停，#菜单ul li a:聚焦，#菜单ul li a.激活{
背景：#58c071；
颜色：白色；
}
#菜单ul li>。子菜单{
显示：无；
位置：绝对位置；
顶部：24px；
宽度：200px；
背景：白色；
左：0；
}
#菜单li:hover>ul{
显示：块
}












您必须有
位置：相对和
左侧：0
；在
。子菜单
选择器上：

在您的问题中，它被添加到
#菜单ul
，该菜单将子菜单相对于该菜单定位

#menu ul li  {
  position: relative;
}

及

你必须有
位置：相对和
左侧：0
；在
。子菜单
选择器上：

在您的问题中，它被添加到
#菜单ul
，该菜单将子菜单相对于该菜单定位

#menu ul li  {
  position: relative;
}

及

给出
位置：相对于
li
而不是相对于
ul

给出
位置：相对于
li
而不是相对于
ul

您的
子菜单
属性被覆盖，此处的
显示：inline
出现问题

此外，您的
ul li a
代码正在影响
子菜单内的
li a

尝试以下代码更改：


*{
字体系列：arial；
}
#菜单{
高度：65px；
背景:#f3；
文本对齐：居中；
}
#菜单ul{
列表样式：无；
文本对齐：居中；
保证金：0；
填充：0；
位置：相对位置；
顶部：15px
}
#菜单ulli{
列表样式：无；
文本对齐：居中；
左边距：5px；
右边距：5px；
显示：内联块；
垂直对齐：顶部；
}
#菜单ulli a{
填充：4px30px 6px 30px；
边界半径：3px；
显示：内联块；
颜色：#666；
过渡：均为0.3秒；
}
.子菜单LIA{
填充：10px 0！重要；
}
#菜单ul li a:悬停，#菜单ul li a:聚焦，#菜单ul li a.激活{
背景：#58c071；
颜色：白色；
}
.子菜单{
显示：无；
宽度：120px；
背景：白色；
}
#菜单li:hover>ul{
显示：块
}












您的
子菜单
属性被覆盖，此处的
显示：inline
出现问题

此外，您的
ul li a
代码正在影响
子菜单内的
li a

尝试以下代码更改：


*{
字体系列：arial；
}
#菜单{
高度：65px；
背景:#f3；
文本对齐：居中；
}
#菜单ul{
列表样式：无；
文本对齐：居中；
保证金：