提问求解决.option右侧空白

<template>
    <div class="headerView">
        <div class="logo">
            <img src="../assets/black_logo.png" alt="IKFA" height="50px">
        </div>
        <div class="rightNavs">
            <div class="nav">
                <span>前端</span>
                <div class="options">
                    <div class="options-before"></div>
                    <div class="option">JavaScript</div>
                    <div class="option">Vue.js</div>
                    <div class="option">React</div>
                    <div class="option">CSS</div>
                    <div class="option">小程序</div>
                    <div class="option">更多<i class='fa fa-angle-right fa-lg'></i></div>
                </div>
            </div>
            <div class="nav">
                <span>社区</span>
                <div class="options">
                    <div class="options-before"></div>
                    <div class="option">Node.js</div>
                    <div class="option">Java</div>
                    <div class="option">C++/C</div>
                    <div class="option">PHP</div>
                    <div class="option">Python</div>
                    <div class="option">Go</div>
                    <div class="option">更多<i class='fa fa-angle-right fa-lg'></i></div>
                </div>
            </div>
            <div class="nav">
                <span>资源</span>
                <div class="options">
                    <div class="options-before"></div>
                    <div class="option">开发</div>
                    <div class="option">教程</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'headerView'
}
</script>
<style>
.headerView{
    z-index: 100000;
    position: fixed;
    border-top: 4px #0051ff solid;
    left: 0;
    right: 0;
    height: 70px;
    background: white;
    box-shadow: 0 0 4px 0 #b8b8b8;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 30px;
}
.headerView .logo{
    user-select: none;
    vertical-align: middle;
}
.headerView .logo img{
    height: 50px;
    margin-top: 10px;
}
.headerView .rightNavs *{
    vertical-align: top;
}
.headerView .rightNavs .nav{
    font-family: 'Microsoft Yahei';
    display: inline-block;
    /* font-weight: bold; */
    text-align: center;
    /* overflow: hidden; */
    margin-left: -30px;
}
.headerView .rightNavs .nav span{
    height: 70px;
    line-height: 70px;
    display: inline-block;
}
.headerView>.rightNavs>.nav:hover>.options{
    display: block;
    height: auto !important;
    overflow: visible;
    background-color: white;
    box-shadow: 0 0 7px 0 #b8b8b8;
    text-align: left;
}
.headerView>.rightNavs>.nav:hover>.options:before{
    display: inline-block;
}
.headerView .rightNavs .nav .options{
    height: 0 !important;
    overflow: hidden;
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 0 7px 0 transparent;
    /* transform: translateX(-25%); */
    margin-top: 20px;
    padding: 14px 0;
    z-index: -1000;
}
.headerView .rightNavs .nav .options:before{
    content: "";
    display: inline-block;
    float: left;
    margin-top: -18px;
    margin-left: calc(calc(100% - 10px)/2);
    /* clip-path: polygon(50% 0,50% 0,100% 100%,0 100%); */
    background: linear-gradient(45deg, white 50%, transparent 50%);
    transform: rotate(135deg);
    width: 10px;
    height: 10px;
    z-index: -1;
    box-shadow: 0 0 10px rgb(143, 143, 143);
    position: relative;
    display: none;
}
.headerView .rightNavs .nav .options-before{
    display: inline-block;
    float: left;
    margin-top: -4px;
    margin-left: calc(calc(100% - 10px)/2);
    /* clip-path: polygon(50% 0,50% 0,100% 100%,0 100%); */
    background: linear-gradient(45deg, white 50%, transparent 50%);
    transform: rotate(135deg);
    position: relative;
    top: -14px;
    width: 10px;
    height: 10px;
}
.headerView .rightNavs .nav .option i{
    vertical-align: middle;
    margin-top: -4px;
    margin-left: 10px;
}
.headerView .rightNavs .nav .option{
    width: 80px;
    overflow: hidden;
    line-height: 30px;
    /* display: inline-block; */
    padding: 3px 30px;
    z-index: 9999;
    max-height: 42px;
    /* overflow: hidden; */
    position: relative;
    left: 0;
    max-width: 200px;
    transition: all 0.2s;
}
.headerView .rightNavs .nav .option:hover{
    background: #f3f3f3;
    color: #0051ff;
}
</style>
<template>
    <div class="headerView">
        <div class="logo">
            <img src="../assets/black_logo.png" alt="IKFA" height="50px">
        </div>
        <div class="rightNavs">
            <div class="nav">
                <span>前端</span>
                <div class="options">
                    <div class="options-before"></div>
                    <div class="option">JavaScript</div>
                    <div class="option">Vue.js</div>
                    <div class="option">React</div>
                    <div class="option">CSS</div>
                    <div class="option">小程序</div>
                    <div class="option">更多<i class='fa fa-angle-right fa-lg'></i></div>
                </div>
            </div>
            <div class="nav">
                <span>社区</span>
                <div class="options">
                    <div class="options-before"></div>
                    <div class="option">Node.js</div>
                    <div class="option">Java</div>
                    <div class="option">C++/C</div>
                    <div class="option">PHP</div>
                    <div class="option">Python</div>
                    <div class="option">Go</div>
                    <div class="option">更多<i class='fa fa-angle-right fa-lg'></i></div>
                </div>
            </div>
            <div class="nav">
                <span>资源</span>
                <div class="options">
                    <div class="options-before"></div>
                    <div class="option">开发</div>
                    <div class="option">教程</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name: 'headerView'
}
</script>

<style>
.headerView{
    z-index: 100000;
    position: fixed;
    border-top: 4px #0051ff solid;
    left: 0;
    right: 0;
    height: 70px;
    background: white;
    box-shadow: 0 0 4px 0 #b8b8b8;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 30px;
}
.headerView .logo{
    user-select: none;
    vertical-align: middle;
}
.headerView .logo img{
    height: 50px;
    margin-top: 10px;
}
.headerView .rightNavs *{
    vertical-align: top;
}
.headerView .rightNavs .nav{
    font-family: 'Microsoft Yahei';
    display: inline-block;
    /* font-weight: bold; */
    text-align: center;
    /* overflow: hidden; */
    margin-left: -30px;
}
.headerView .rightNavs .nav span{
    height: 70px;
    line-height: 70px;
    display: inline-block;
}
.headerView>.rightNavs>.nav:hover>.options{
    display: block;
    height: auto !important;
    overflow: visible;
    background-color: white;
    box-shadow: 0 0 7px 0 #b8b8b8;
    text-align: left;
}
.headerView>.rightNavs>.nav:hover>.options:before{
    display: inline-block;
}
.headerView .rightNavs .nav .options{
    height: 0 !important;
    overflow: hidden;
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 0 7px 0 transparent;
    /* transform: translateX(-25%); */
    margin-top: 20px;
    padding: 14px 0;
    z-index: -1000;
}
.headerView .rightNavs .nav .options:before{
    content: "";
    display: inline-block;
    float: left;
    margin-top: -18px;
    margin-left: calc(calc(100% - 10px)/2);
    /* clip-path: polygon(50% 0,50% 0,100% 100%,0 100%); */
    background: linear-gradient(45deg, white 50%, transparent 50%);
    transform: rotate(135deg);
    width: 10px;
    height: 10px;
    z-index: -1;
    box-shadow: 0 0 10px rgb(143, 143, 143);
    position: relative;
    display: none;
}
.headerView .rightNavs .nav .options-before{
    display: inline-block;
    float: left;
    margin-top: -4px;
    margin-left: calc(calc(100% - 10px)/2);
    /* clip-path: polygon(50% 0,50% 0,100% 100%,0 100%); */
    background: linear-gradient(45deg, white 50%, transparent 50%);
    transform: rotate(135deg);
    position: relative;
    top: -14px;
    width: 10px;
    height: 10px;
}
.headerView .rightNavs .nav .option i{
    vertical-align: middle;
    margin-top: -4px;
    margin-left: 10px;
}
.headerView .rightNavs .nav .option{
    width: 80px;
    overflow: hidden;
    line-height: 30px;
    /* display: inline-block; */
    padding: 3px 30px;
    z-index: 9999;
    max-height: 42px;
    /* overflow: hidden; */
    position: relative;
    left: 0;
    max-width: 200px;
    transition: all 0.2s;
}
.headerView .rightNavs .nav .option:hover{
    background: #f3f3f3;
    color: #0051ff;
}
</style>
<template>
    <div class="headerView">
        <div class="logo">
            <img src="../assets/black_logo.png" alt="IKFA" height="50px">
        </div>
        <div class="rightNavs">
            <div class="nav">
                <span>前端</span>
                <div class="options">
                    <div class="options-before"></div>
                    <div class="option">JavaScript</div>
                    <div class="option">Vue.js</div>
                    <div class="option">React</div>
                    <div class="option">CSS</div>
                    <div class="option">小程序</div>
                    <div class="option">更多<i class='fa fa-angle-right fa-lg'></i></div>
                </div>
            </div>
            <div class="nav">
                <span>社区</span>
                <div class="options">
                    <div class="options-before"></div>
                    <div class="option">Node.js</div>
                    <div class="option">Java</div>
                    <div class="option">C++/C</div>
                    <div class="option">PHP</div>
                    <div class="option">Python</div>
                    <div class="option">Go</div>
                    <div class="option">更多<i class='fa fa-angle-right fa-lg'></i></div>
                </div>
            </div>
            <div class="nav">
                <span>资源</span>
                <div class="options">
                    <div class="options-before"></div>
                    <div class="option">开发</div>
                    <div class="option">教程</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name: 'headerView'
}
</script>

<style>
.headerView{
    z-index: 100000;
    position: fixed;
    border-top: 4px #0051ff solid;
    left: 0;
    right: 0;
    height: 70px;
    background: white;
    box-shadow: 0 0 4px 0 #b8b8b8;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 30px;
}
.headerView .logo{
    user-select: none;
    vertical-align: middle;
}
.headerView .logo img{
    height: 50px;
    margin-top: 10px;
}
.headerView .rightNavs *{
    vertical-align: top;
}
.headerView .rightNavs .nav{
    font-family: 'Microsoft Yahei';
    display: inline-block;
    /* font-weight: bold; */
    text-align: center;
    /* overflow: hidden; */
    margin-left: -30px;
}
.headerView .rightNavs .nav span{
    height: 70px;
    line-height: 70px;
    display: inline-block;
}
.headerView>.rightNavs>.nav:hover>.options{
    display: block;
    height: auto !important;
    overflow: visible;
    background-color: white;
    box-shadow: 0 0 7px 0 #b8b8b8;
    text-align: left;
}
.headerView>.rightNavs>.nav:hover>.options:before{
    display: inline-block;
}
.headerView .rightNavs .nav .options{
    height: 0 !important;
    overflow: hidden;
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 0 7px 0 transparent;
    /* transform: translateX(-25%); */
    margin-top: 20px;
    padding: 14px 0;
    z-index: -1000;
}
.headerView .rightNavs .nav .options:before{
    content: "";
    display: inline-block;
    float: left;
    margin-top: -18px;
    margin-left: calc(calc(100% - 10px)/2);
    /* clip-path: polygon(50% 0,50% 0,100% 100%,0 100%); */
    background: linear-gradient(45deg, white 50%, transparent 50%);
    transform: rotate(135deg);
    width: 10px;
    height: 10px;
    z-index: -1;
    box-shadow: 0 0 10px rgb(143, 143, 143);
    position: relative;
    display: none;
}
.headerView .rightNavs .nav .options-before{
    display: inline-block;
    float: left;
    margin-top: -4px;
    margin-left: calc(calc(100% - 10px)/2);
    /* clip-path: polygon(50% 0,50% 0,100% 100%,0 100%); */
    background: linear-gradient(45deg, white 50%, transparent 50%);
    transform: rotate(135deg);
    position: relative;
    top: -14px;
    width: 10px;
    height: 10px;
}
.headerView .rightNavs .nav .option i{
    vertical-align: middle;
    margin-top: -4px;
    margin-left: 10px;
}
.headerView .rightNavs .nav .option{
    width: 80px;
    overflow: hidden;
    line-height: 30px;
    /* display: inline-block; */
    padding: 3px 30px;
    z-index: 9999;
    max-height: 42px;
    /* overflow: hidden; */
    position: relative;
    left: 0;
    max-width: 200px;
    transition: all 0.2s;
}
.headerView .rightNavs .nav .option:hover{
    background: #f3f3f3;
    color: #0051ff;
}
</style>

语言：VUE 2

问题：当鼠标移动到.option时，.option右边会出现空白部分，求解决。