Html 我的子菜单的位置和打开错误

我正在尝试创建一个网站，我需要一个多级子菜单。 我目前面临两个问题：

我不知道如何正确定位子菜单。它应该出现在子菜单旁边，高度与上一个菜单项相同，并向下列出

我不知道如何设置，如果我将鼠标悬停在相应的子菜单项上，子菜单只会展开。 我使用的代码附在下面

如果只更改css，我将不胜感激，因为网站运行的程序创建html 代码如下：

正文{
保证金：0；
填充：0；
背景：#ccc；
颜色：#00782E；
字体系列：Arial、Helvetica、无衬线字体；
}
/*割台利斯特*/
.导航{
宽度：100%；
高度：70像素；
背景：#00782E；
位置：固定；
z指数：2；
}
/*奥伯明庞克特酒店*/
美国海军{
宽度：60%；
高度：70像素；
列表样式：无；
背景：无；
文本对齐：居中；
填充：0；
边际上限：0px；
左边缘：25%；
右边距：15%；
位置：固定；
}
/*Menüoberpunkte位置*/
李国荣先生{
线高：20px；
显示：内联块；
}
/*时尚男装*/
.导航a{
文字装饰：无；
颜色：白色；
宽度：自动；
显示：块；
填充顶部：25px；
右边填充：10px；
左侧填充：10px；
垫底：5px；
字体大小：20px；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
}
梅努利斯特先生{
显示：无；
}
下拉内容{
显示：无；
}
/*Untermenübei Hover n Anzigen*/
.下拉列表：hover.menulist.menulist{
显示：块；
左边距：0；
文本对齐：左对齐；
宽度：200px；
高度：自动；
填充顶部：6px；
垫底：6px；
列表样式：无；
右边距：0；
位置：固定；
背景：白色；
}
梅努利斯特，梅努利斯特{
背景色：红色！重要；
宽度：280px！重要；
}
.下拉：悬停.下拉内容ul{
显示：无；
}
.menulist ul:悬停。下拉内容ul{
显示：块！重要；
}
/*乌特明·乌尔斯特·奥德农风格*/
梅努利斯特先生{
颜色：#00782E；
字体系列：Arial、Helvetica、无衬线字体；
字号：18px；
线高：12px；
字号：500；
宽度：150px；
左侧填充：16px；
填充顶部：10px；
垫底：10px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
梅努利斯特，梅努利斯特{
字体大小：15px；
填充顶部：6px，
垫底：6px；
右边距：0px；
右边填充：0px；
左侧填充：6px；
}
/*Abstrand Untermenütext 1 zum Kasten*/
.menulevel1{
左边距：6px；
}
/*Untermenüpunkte 2。奥德农风格*/
.下拉菜单a{
颜色：#00782E；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
线高：12px；
字号：500；
宽度：150px；
左侧填充：16px；
垫面：1px；
垫底：1px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
li a:悬停，.下拉：悬停.dropbtn{
颜色：浅灰色！重要；
}

您不使用基本boo的具体原因是什么