Javascript 菜单标题中的下拉菜单变得混乱

我正在为我的网页制作菜单标题。这是我的名片

在我的菜单标题中，我的下拉列表在

INSURANCE

文本上无法正常工作。一旦你点击它，你就会明白我的意思。我不知道出了什么问题。我相信这主要是因为

的
高度
和
溢出
对
.topnav
造成的，但我不确定最好的解决方法是什么

以下是我的HTML和CSS：


@font-face{
字体系列：前卫半迷你；
src:url（AvantGarde-Demi.woff）；
}
@字体{
字体系列：前卫；
src:url（AvantGarde.woff）；
}
@字体{
字体系列：ITC前卫哥特式；
src:url（ITC-Avant-Garde-Gothic.woff）；
}
/******************顶部导航****************************/
托普纳夫先生{
位置：相对位置；
顶部：-890px；
背景色：rgba（0,0,0,0.5）；
高度：89px；
边框底部：3px实心#EF7440；
溢出：隐藏；
}
.topnav ul>li{
浮动：左；
显示：块；
文本对齐：居中；
填充：14px 16px；
}
.topnav a{
文字装饰：无；
字号：17px；
颜色：白色；
显示：块；
}
/*最初隐藏的下拉菜单*/
.topnav ul>li>ul{
显示：无；
边缘顶部：30px；
宽度：200px；
填充：0；
位置：绝对位置；
背景色：#f76c38；
}
.topnav ul>li>ul>li{
浮动：左；
清除：左；
显示：块；
文本对齐：左对齐；
}
身体{
边界：0；
保证金：0；
身高：100%；
最小高度：100%；
溢出x：隐藏；
}
.标题{
位置：相对位置；
高度：769px；
}
.标题背景{
高度：769px；
宽度：100%；
}
.橙色酒吧{
位置：相对位置；
左侧填充：150px；
顶部：-430px；
左：-160px；
}
.标题h1{
左侧填充：110px；
颜色：白色；
字体系列：前卫；
文本对齐：居中；
字体大小：35px；
左：-420px；
字母间距：.24em；
位置：相对位置；
顶部：-615px；
字体系列：“前卫”；
文本转换：大写；
}
.标题p{
左侧填充：290px；
文本对齐：居中；
右边填充：210px；
字体大小：22px；
字母间距：.12em；
字体系列：“阿德勒体育”；
颜色：白色；
位置：相对位置；
顶部：-700px；
}
.标题h2{
字体系列：“阿德勒体育”；
字体：斜体；
文本转换：大写；
顶部：-490px；
字体大小：正常；
字号：21px；
位置：相对位置；
左边距：630px；
颜色：白色；
字母间距：0.24em；
}
.标题a{
颜色：白色；
文字装饰：无；
}
#诺思曼世界酒店{
背景尺寸：封面；
背景图片：url（“our_story.png”）；
/*宽度：404px*/
高度：768px！重要；
}
.登录{
显示：内联；
左侧填充：15px；
字母间距：.25em；
颜色：白色；
字号：11.433px；
字体系列：前卫；
}
.登入{
颜色：白色；
文字装饰：无；
}
.登录a:悬停{
颜色：#fe5b1f；
文字装饰：无；
}
.集装箱{
宽度：100%！重要；
}
李：保险{
填充顶部：30px！重要；
}
我们的故事{
填充顶部：30px！重要；
}
li.login-signup{
填充顶部：30px！重要；
}
李，掩护一下{
边缘顶部：15px；
填充底部：10px！重要；
填充顶部：10px！重要；
}
我们的故事{
右边距：200px！重要；
字体系列：前卫；
字母间距：.30em；
颜色：白色；
}
li.login-signup{
字体：斜体；
字体大小：12px；
字体系列：Adelle PE；
字母间距：.30em；
颜色：白色；
}
李，掩护一下{
边框颜色：#EF7440；
边框样式：实心；
颜色：白色；
字母间距：.30em；
字体系列：Adelle PE；
}
李。被掩护：悬停{
背景色：#EF7440；
}
李：保险{
右边距：80px；
左边距：80px；
颜色：白色；
字体系列：前卫；
字母间距：.30em；
}












我们的故事
登录|注册
盖住


野生动物保险
您使用了导航div中隐藏的溢出，这导致了问题。这是我的建议

知道了。。如何将它们正确地对齐在一行中，以便在我们的菜单标题中，所有内容都成一条直线。。下拉列表也应该从橙色线的边界开始。有什么想法吗？同样在你删除了JSFIDLE中隐藏的部分之后，我看到页面顶部有一个缺口，我的菜单栏在那里，而之前没有。这里是另一个。我正在尝试对齐导航菜单。如果需要其他帮助，请告诉我。现在看起来很好。。我看到的一件事是，如果你看页面的顶部，你会看到菜单栏在页面底部显示了一点，并且在开始部分有一个间隙。。知道为什么会这样吗？看看这个。topnav类别的保证金需要增加。别忘了把我的答案标为正确。
.topnav {
    position: relative;
    top: -890px;
    background-color: rgba(0, 0, 0, 0.5);
    height: 89px;
    border-bottom: 3px solid #EF7440;
    /*overflow: hidden;*/
}