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

[Anonymous]

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


< pre class="snippet-code-css lang-css Prettyprint-override">

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

@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;
overflow: visible;
}

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

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 */
overflow: visible;
}

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 */
}

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

body {
margin: 0;
padding: 0;
}

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

[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

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