Как заставить подменю работать с clippath при его использовании в качестве дизайна вместо изображений ⇐ CSS

[Anonymous]

Изучаем современные навигационные панели/меню. Недавно я увидел классный эффект с контуром обрезки, позволяющий создать аналогичный эффект без использования изображений. Однако этот путь к клипу, похоже, мешает моему подменю работать или быть видимым.
Я пробовал увеличить его и все такое, но затем он удалил имеющийся у меня дизайн. Я также пробовал переполнение и z-index.
ниже описана проблема, а также я несколько раз читал, как задавать вопросы, и нашел это бесполезным, также я у вас умственное отклонение, поэтому не нужно грубить....

Код: Выделить всё

Page Title

/* Define Variables */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/* Navigation Style */
.flex-container {
display: flex;
justify-content: center;
background: linear-gradient(0deg, black 49%, #5c5c5c 51%);
}

.flex-container>div {
background-color: #ffffff;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}

nav {
align-content: center;
margin-inline: auto;
width: auto;
align-items: center;
text-transform: uppercase;
font-family: 'Roboto Mono', monospace;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(180deg, #71bfff 49%, #3090e0 51%);
clip-path: polygon(2% 90%, 98% 90%, 100% 0, 0 0);
transform: translateZ(0);
}

nav ul li {
float: left;
position: relative;
}

nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 18px;
text-decoration: none;
}

nav ul li a:hover {
background: linear-gradient(0deg, black 49%, #252525 51%);
}

nav ul li.active {
background: linear-gradient(0deg, black 49%, #252525 51%);
}

/* Submenu styles */
nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: linear-gradient(180deg, #71bfff 49%, #3090e0 51%);
padding: 0;
margin: 0;
list-style: none;
z-index: 1000;
/* Ensure the submenu is on top */
}

nav ul li:hover>ul {
display: block;
}

nav ul li ul li {
width: 150px;
}

nav ul li ul li a {
padding: 10px 14px;
color: white;
text-align: left;
/* Align text to the left */
}






[list]
[*][url=#home]HOME[/url]
[*][url=portal.html]My XFGNX[/url]
[*][url=xbox.html]XBOX[/url]
[*][url=playstation.html]PLAYSTATION[/url]
[*][url=tournaments.html]TOURNAMENTS[/url]
[*][url=#members]MEMBERS[/url]
[*][url=#forums]FORUMS[/url]
[*]
[url=#more]MORE[/url]

[url=#about]About Us[/url]
[*][url=#contact]Contact[/url]
[*][url=#faq]FAQ[/url]
[/list]

[*][url=sprt.html]SUPPORT[/url]



Note:  under construction




Latest Forum Posts




[i][/i]
New Template is now Revamped!
Replies: 7777 | Views: 8888
~ Mr.Owl


[i][/i]
Exciting News about Upcoming Tournament!
~ GamingAdmin


[i][/i]
Important Security Update: Please Read!
~ ITSupport


[i][/i]
Discussion: Best Gaming Moments of the Year
~ GamingEnthusiast


[i][/i]
Feedback Needed: Website Redesign Proposal
~ UXDesigner


[i][/i]
Breaking News: Exclusive Game Release Announcement!
~ GamingJournalist


[i][/i]
Update: Server Maintenance Scheduled for Tomorrow
~ SystemAdmin


[i][/i]
Reminder: Monthly Community Meetup This Saturday
~ EventOrganizer






// = 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>

Подробнее здесь: https://stackoverflow.com/questions/786 ... -as-appose