如何在不被破坏的情况下修复顶部的导航栏？

问：

我正在使用 react 和 tailwind css 开发一个投资组合网站。当我设计导航栏时，我想要一个悬停效果，所以我从这个代码笔中复制了悬停效果：

用于悬停效果的 CodePen

但是一旦我复制了 css，我就相应地编辑了我的 css。这是 css：

.translucent {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.nav{
    color: #fff;
    padding: 15px;
    margin-left: 15px;
    margin-right: 15px;
}

.nav * {
  box-sizing: border-box;
  transition: all .35s ease;
}

.nav li {
  display: inline-block;
  list-style: outside none none;
  margin: .5em 1em;
  padding: 0;
}

.nav a {
  padding: .5em .8em;
  color: rgba(255,255,255,.5);
  position: relative;
  text-decoration: none;
  font-size: 20px;
}

.nav a::before,
.nav a::after {
  content: '';
  height: 14px;
  width: 14px;
  position: absolute;
  transition: all .35s ease;
  opacity: 0;
}

.nav a::before {
  content: '';
  right: 0;
  top: 0;
  border-top: 3px solid #ACDDDE;
  border-right: 3px solid #ACDDDE;
  transform: translate(-100%, 50%);
}

.nav a:after {
  content: '';
  left: 0;
  bottom: 0;
  border-bottom: 3px solid #ACDDDE;
  border-left: 3px solid #ACDDDE;
  transform: translate(100%, -50%)
}

.nav a:hover:before,
.nav a:hover:after{
  transform: translate(0,0);
  opacity: 1;
}

.nav a:hover {
  color: #fff;
}

.nav a:visited {
  color: #fff;
}

这是 jsx：

import React from "react";
import "./header.css";
import logo from "../../assets/logo.png";

const Header = () => {
    return (
        <div className="translucent flex justify-between nav items-baseline fixed">
            <div className="h-12 sm:hidden px-6">
                <img src={logo} alt="Harshal Gunjal" />
            </div>
            <div className="text-white text-2xl font-bold hidden sm:block px-6 cursor-pointer">
                Harshal Gunjal
            </div>
            <div className="px-6">
                <ul className="flex items-center justify-center gap-8">
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#home">Home</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#about">About</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#resume">Resume</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    );
};

export default Header;

在应用固定标记之前，导航栏如下所示：

在导航栏上应用固定标签后，它变为：

您可以在 github 中找到代码：

GitHub 源代码

如何在不更改的情况下修复顶部的导航栏？感谢您的帮助。

我尝试更改 css 文件中的 css 而不是顺风“固定”类，但它没有用。我还尝试更改 nav 中的位置属性，但每次我更改任何内容时导航栏都会被破坏。