对齐 CSS 转换

Question

所以我一直在重新学习html/css和MVC ASP.NET 但我在导航栏上进行最后的润色时遇到了麻烦。 下面生成一个侧导航栏，当将鼠标悬停在上面时会变换：

.html：

<div class="menu">
<div class="nav-arrow"></div>
<nav>
<ul class="nav-list">
<li class="nav-item">@Html.ActionLink("Home", "Index", "Home")</li>
<li class="nav-item">@Html.ActionLink("About", "About", "Home")</li>
<li class="nav-item">@Html.ActionLink("Services", "Index", "Services")</li>
<li class="nav-item">@Html.ActionLink("Contact", "Index", "Contact")</li>
</ul>
</nav>
</div>

.css：

.menu {
position: fixed;
height: 100vh;
background-color: pink;
width: 7vw;
box-shadow: 1px 0 2px rgba(0,0,0,.2);
transition: 1s;}
.menu:hover {
width: 40vw;
}
.menu:hover ~ .container {
transform: perspective(80vw) rotateY(10deg) translateX(35vw) scaleY(1.2);
}
.menu:hover nav {
left: 20%;
}
nav {
position: absolute;
margin-top: 50%;
left: -1000px;
transition: .5s;
}
.nav-arrow {
position: absolute;
margin-top: 50vh;
margin-left: 30%;
cursor: pointer;
transition: all 0.3s ease;
width: 0;
height: 0;
border-right: 35px solid #569cbd;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.nav-list {
color: black;
text-transform: uppercase;
list-style-type: none;
}
.nav-item {
line-height: 3em;
letter-spacing: .3em;
}
a {
margin-top: 0;
font-size: 30px;
text-decoration: none;
color: black;
font-weight: 600;
}

我不知道我是否已经盯着它太久还是什么，但我无法让 .nav-arrow 与菜单转换对齐。 感谢您的任何建议！

Answer 1

我认为在.nav-arrow中添加right: 48px;(或类似(就可以完成工作

Answer 2

不确定我是否完全理解您要做什么，但如果您希望.nav-arrow在粉红色菜单栏打开时保持右对齐，请更新.nav-arrow代码以使用right: 0而不是边距，如下所示：

.nav-arrow {
position: absolute;
right: 0;
margin-top: 50vh;
cursor: pointer;
transition: all 0.3s ease;
width: 0;
height: 0;
border-right: 35px solid #569cbd;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}

.menu {
position: fixed;
height: 100vh;
background-color: pink;
width: 7vw;
box-shadow: 1px 0 2px rgba(0,0,0,.2);
transition: 1s;}
.menu:hover {
width: 40vw;
}
.menu:hover ~ .container {
transform: perspective(80vw) rotateY(10deg) translateX(35vw) scaleY(1.2);
}
.menu:hover nav {
left: 20%;
}
nav {
position: absolute;
margin-top: 50%;
left: -1000px;
transition: .5s;
}
.nav-arrow {
position: absolute;
right: 0;
margin-top: 50vh;
cursor: pointer;
transition: all 0.3s ease;
width: 0;
height: 0;
border-right: 35px solid #569cbd;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.nav-list {
color: black;
text-transform: uppercase;
list-style-type: none;
}
.nav-item {
line-height: 3em;
letter-spacing: .3em;
}
a {
margin-top: 0;
font-size: 30px;
text-decoration: none;
color: black;
font-weight: 600;
}

<div class="menu">
<div class="nav-arrow"></div>
<nav>
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>