Css 浮动右导航问题

嘿，我有点问题。当我将鼠标悬停在导航的右侧时，它会将下拉菜单向右移动一点。每一个其他导航位置都是其绝对位置

nav{
左侧填充：5px
}
导航，主导航{
高度：80px；
宽度：100%；
利润上限：64px；
背景：url（../images/navHeader.png）无重复顶部；
职位：相对
}
导航主导航>ul{
列表样式类型：无；
}
主导航ul a，
主导航ulli{
显示：内联块；
填充物：5px；
高度：80px；
保证金：5px；
对齐内容：居中对齐；
}
导航主导航下拉列表内容a{
高度：自动；
线高：初始；
填充：5px0；
}
主导航ul a{
文本对齐：居中；
字号：700；
字体大小：15px；
颜色：84827d；
文本阴影：1px 1px 1px#000；
文本转换：大写；
-webkit转换：所有.2易入易出；
过渡：全部。2轻松进出
}
导航主导航ul a：悬停{
文字装饰：无；
颜色：#7289da
}
导航.主导航李.下拉列表{
}
导航主导航下拉列表内容{
位置：绝对位置；
显示：无；
z指数：10；
-网络工具包盒阴影：0 3px 5px 0#999；
-莫兹盒阴影：0 3px 5px 0#999；
盒影：0 3px 5px 0#999；
边框：1px实心#CCC；
背景#0d2638；
颜色：#656161；
不透明度：.8；
顶部：50px；
}
导航主导航下拉列表内容a{
字号：8px；
文字装饰：无；
显示：块；
文本对齐：居中；
}
导航主导航下拉菜单内容a：悬停{
背景色：#3A4 FC5
}
导航.主导航.下拉菜单：悬停.下拉菜单内容{
显示：内联块；
}
导航主导航左{
浮动：左；
左边距：5px；
}
.下拉内容{
填充：0；
宽度：自动！重要；
显示器：flex；
弯曲方向：立柱；
}
.下拉列表内容{
高度：自动！重要；
位置：相对位置；
}
.下拉内容ul li:悬停>.第二个下拉内容{
显示：块；
}
.第二个下拉内容{
位置：绝对位置；
显示：无；
浮动：左；
z指数：10；
-网络工具包盒阴影：0 3px 5px 0#999；
-莫兹盒阴影：0 3px 5px 0#999；
盒影：0 3px 5px 0#999；
边框：1px实心#CCC；
背景#0d2638；
颜色：#656161；
不透明度：.8；
最小宽度：30px；
顶部：0px；
页边顶部：-1px；
左边距：1px；
左：100%；
}
.第二个ul li的下拉内容{
位置：相对位置；
}
导航主导航ul右{
浮动：对；
右边距：25px；
}
这是我的html，提前谢谢你。我一直在绞尽脑汁想知道为什么，但我似乎无法应付。请帮忙。

试试这个CSS

nav {
    padding-left: 5px
}

nav .main-nav {
    height: 80px;
    width: 100%;
    margin-top: 64px;
    background: url(../images/navHeader.png) no-repeat top;
    position: relative
}

nav .main-nav > ul {
    list-style-type: none;

}

nav .main-nav ul a,
nav .main-nav ul li {
    display: inline-block;
    padding: 5px;
    height: 80px;
    margin: 5px;

    align-content:center;
}

nav .main-nav .dropdown-content a {
  height: auto;
  line-height: initial;
  padding: 5px 0;
}

nav .main-nav ul a {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: #84827d;
    text-shadow: 1px 1px 1px #000;
    text-transform: uppercase;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

nav .main-nav ul a:hover {
    text-decoration: none;
    color: #7289da
}
nav .main-nav li.dropdown {
    position: relative;
}
nav .main-nav .dropdown-content {
    position: absolute;
    display: none;
    z-index: 10;
    -webkit-box-shadow: 0 3px 5px 0 #999;
    -moz-box-shadow: 0 3px 5px 0 #999;
    box-shadow: 0 3px 5px 0 #999;
    border: 1px solid #CCC;
    background: #0d2638;
    color: #656161;
    opacity: .8;
    top : 35px;

}
nav .main-nav .dropdown-content a {
    font-size: 8px;
    text-decoration: none;
    display: block;
    text-align: center;
}
nav .main-nav .dropdown-content a:hover {
    background-color: #3A4FC5
}

nav .main-nav .dropdown:hover .dropdown-content {
    display: inline-block;
}

nav .main-nav ul.left {
    float: left;
    margin-left: 5px;
}

.dropdown-content ul {
    padding: 0;
    width: auto !important;
    display: flex;
    flex-direction: column;
}

.dropdown-content ul li {
    height: auto !important;
    position: relative;
}

.dropdown-content ul li:hover > .dropdown-content-second {
    display: block;
}

.dropdown-content-second {
     position: absolute;
    display: none;
    float: left;
    z-index: 10;
    -webkit-box-shadow: 0 3px 5px 0 #999;
    -moz-box-shadow: 0 3px 5px 0 #999;
    box-shadow: 0 3px 5px 0 #999;
    border: 1px solid #CCC;
    background: #0d2638;
    color: #656161;
    opacity: .8;
    min-width: 30px;
    top: 0px;
    margin-top: -1px;
    margin-left: 1px;
    left: 100%;

}

.dropdown-content-second ul li  {
    position: relative;
}

nav .main-nav ul.right {
    float: right;
    margin-right: 25px;
}

---

如果你翻开整页，那就是以神话为悬停的那一页。菜单上乱七八糟的，你想要什么样的结果？您是否有希望下拉列表表现为的图像或示例？