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

[Anonymous]

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





Page Title

/* Define Variables */
@import url('https://fonts.googleapis.com/css2?famil ... splay=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;
}

• HOME
• My XFGNX
• XBOX
• PLAYSTATION
• TOURNAMENTS
• MEMBERS
• FORUMS
• MORE
  
  About Us
• Contact
• FAQ

[*]SUPPORT



Note: under construction




Latest Forum Posts





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



Exciting News about Upcoming Tournament!
~ GamingAdmin



Important Security Update: Please Read!
~ ITSupport



Discussion: Best Gaming Moments of the Year
~ GamingEnthusiast



Feedback Needed: Website Redesign Proposal
~ UXDesigner



Breaking News: Exclusive Game Release Announcement!
~ GamingJournalist



Update: Server Maintenance Scheduled for Tomorrow
~ SystemAdmin



Reminder: Monthly Community Meetup This Saturday
~ EventOrganizer









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