Html 将子菜单与主菜单对齐

我的

子菜单

和

子菜单

之间似乎有很大的差距，与主菜单不一致。我希望将

子菜单

直接从主菜单中下拉，将

子菜单

悬停在

子菜单

的右侧。我该怎么做

以下是我的代码：

.nav栏{
最大高度：0；
左边距：0；
左侧填充：20px；
填充顶部：200px；
}
.box导航杆ul{
显示：内联块；
文字装饰：无；
填充：0；
列表样式类型：无；
保证金：0；
}
.box nav bar ul li{
显示：内联块；
填充：20px；
边框：1px纯灰；
宽度：100px；
高度：50px；
线高：50px；
文本对齐：居中；
位置：相对位置；
}
.box nav bar ul li a{
文字装饰：无；
列表样式：无；
颜色：黑色；
字号：18px；
字体大小：粗体；
字体系列：Arial；
显示：块；
}
.box导航条ul li：悬停{
背景颜色：灰色；
}
.box导航条ul.子菜单ul li{
文字装饰：无；
填充：0；
保证金：0；
列表样式类型：无；
宽度：150px；
}
.box导航条ul.子菜单{
显示：无；
字体大小：14px实心；
位置：绝对位置；
文本对齐：居中；
}
.box导航栏li：悬停子菜单{
显示：块；
}
.子菜单{
显示：无；
字体大小：14px实心；
位置：绝对位置；
文本对齐：居中；
}
.box导航栏li:悬停。子菜单li:悬停{
显示：块；
}

您的

子菜单

和

子菜单

上有

位置：绝对

。只需使用

top

和

left

属性对齐容器块即可

另外，

font-size:14px-solid

无效，因为

solid

是一个

边框类型

属性，并且

font-size

不需要。只需将其更改为

字体大小：14px

参考代码：

.nav栏{
最大高度：0；
左边距：0；
左侧填充：20px；
填充顶部：200px；
}
.box导航杆ul{
显示：内联块；
文字装饰：无；
填充：0；
列表样式类型：无；
保证金：0；
}
.box nav bar ul li{
显示：内联块；
填充：20px；
边框：1px纯灰；
宽度：100px；
高度：50px；
线高：50px；
文本对齐：居中；
位置：相对位置；
}
.box nav bar ul li a{
文字装饰：无；
列表样式：无；
颜色：黑色；
字号：18px；
字体大小：粗体；
字体系列：Arial；
显示：块；
}
.box导航条ul li：悬停{
背景颜色：灰色；
}
.box导航条ul.子菜单ul li{
文字装饰：无；
填充：0；
保证金：0；
列表样式类型：无；
宽度：150px；
}
.box导航条ul.子菜单{
显示：无；
字体大小：14px；
位置：绝对位置；
文本对齐：居中；
顶部：91px；
左：0；
}
.box导航栏li：悬停子菜单{
显示：块；
}
.子菜单{
显示：无；
字体大小：14px；
位置：绝对位置；
文本对齐：居中；
顶部：0px；
左：140像素；
}
.box导航栏li:悬停。子菜单li:悬停{
显示：块；
}

这将帮助您开始

.nav栏{
最大高度：0；
左边距：0；
左侧填充：20px；
填充顶部：200px；
}
.box导航杆ul{
显示：内联块；
文字装饰：无；
填充：0；
列表样式类型：无；
保证金：0；
}
.box nav bar ul li{
显示：内联块；
填充：20px；
边框：1px纯灰；
宽度：100px；
高度：50px；
线高：50px；
文本对齐：居中；
位置：相对位置；
}
.box nav bar ul li a{
文字装饰：无；
列表样式：无；
颜色：黑色；
字号：18px；
字体大小：粗体；
字体系列：Arial；
显示：块；
}
.box导航条ul li：悬停{
背景颜色：灰色；
}
.box导航条ul.子菜单ul li{
文字装饰：无；
填充：0；
保证金：0；
列表样式类型：无；
宽度：150px；
}
.box导航条ul.子菜单{
显示：无；
字体大小：14px实心；
位置：绝对位置；
文本对齐：居中；
左：0；
最高：100%；
}
.box导航栏li：悬停子菜单{
显示：块；
}
.子菜单li{
宽度：100%！重要；
}
.子菜单li：悬停.子菜单{
显示：块！重要；
}
.子菜单{
显示：无！重要；
字体大小：14px实心；
位置：绝对位置；
文本对齐：居中；
顶部：-2px；
左：100%；
}
.box导航栏li:悬停。子菜单li:悬停{
显示：块；
}
.子菜单li{
宽度：100%！重要；
显示：块！重要；
填充：20px！重要；
}