Что мешает моему постепенному появлению/исчезновению, а также сбоям, возникающим при переходе между навигационными меню? ⇐ CSS

[Anonymous]

Во-первых, мой эффект появления/исчезновения не работает. Во-вторых, когда моя мышь прокручивается от одного элемента навигации к другому, подменю слегка смещаются и меняют ориентацию с вертикальной на горизонтальную.
Для моей первой проблемы я попробовал изменить все отображение: нет; код для непрозрачности: 1 видимость: скрыт.
Для моей второй проблемы я попробовал все комбинации задержек перехода и настройки полей/отступов/границ. Кажется, ничего не помогло.
.arizonia-regular {
font-family: "Arizonia", cursive;
font-weight: 400;
font-style: normal;
}

html {
scroll-behavior: smooth;
}

body {
background-color: #170633;
color: #cccccc;
font-style: "roboto", sans-serif;
margin: 75px;
}

.logo {
position: relative;
font-family: "Arizonia", cursive;
font-size: 2.5rem;
text-shadow: 1px 1px 2px black, 0 0 1em gray, 0 0 0.2em gray;
color: white;
}

nav {
border: 2px solid ;
border-image: linear-gradient(to right, black, transparent);
border-image-slice: 2;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-start;
font-family: "Arizonia", cursive;
font-size: 1.5rem;
}

nav li {
padding: 0 50px 0 5px;
text-shadow: 1px 1px 2px black, 0 0 1em gray, 0 0 0.2em gray;
color: white;
}

nav a {
text-decoration: none;
color: white;
}

nav a:hover {
color: #666;
}

.sub-menu {
position: absolute;
top: 100%;
left: 0;
padding: 10px;
border: 2px solid white;
background-color: #170633;
padding: 10px;
list-style: none;
margin: 0;
transform: skewX(-20deg);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-out;
transition-delay: 0.3s;
}

.sub-menu li {
position: relative;
margin: 0;
padding: 10px;
transform: skewX(20deg);
}

.sub-menu li a {
display: block;
text-decoration: none;
color: #ccc;
transition: transform 0.3s ease-in-out;
}

.sub-menu li a:hover {
color: #666;
}

nav li:hover .sub-menu {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}

.dropdown > li {
position: relative;
}

.dropdown .sub-menu {
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.dropdown > li:hover .sub-menu {
opacity: 1;
visibility: visible;
}

.sub-menu li .sub-menu {
top: 0;
left: 100%;
}

.sub-menu li:hover .sub-menu {
opacity: 1;
visibility: visible;
}

.builds {
text-decoration: underline;
display: flex;
justify-content: center;
align-items: center;
}

.sub-menu:before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid #000;
transform: rotate(45deg);
z-index: -1;
}

.dropdown > li:hover .sub-menu,
.sub-menu li:hover .sub-menu {
display: block;
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... hile-trans