Thiết kế website giá rẻ

Question

Learning modern navbars/menus. I recently saw a cool effect with clip path to create a similar effect without using images. How ever this clip path seems to be stop my submenu from working or from being seen.

I’ve tried increasing it and everything but then it removes the design i have. I’ve tried overflow and z-index as well.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<style>
/* 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;
  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;
}
</style>
</head>
<body>

<nav class="flex-container">
  <ul>
    <li><a href="#home">HOME</a></li>
    <li class="active"><a href="portal.html">My XFGNX</a></li> 
    <li><a href="xbox.html">XBOX</a></li>
    <li><a href="playstation.html">PLAYSTATION</a></li>
    <li><a href="tournaments.html">TOURNAMENTS</a></li>
    <li><a href="#members">MEMBERS</a></li>
    <li><a href="#forums">FORUMS</a></li>
    <li>
      <a href="#more">MORE</a>
      <ul>
        <li><a href="#about">About Us</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#faq">FAQ</a></li>
      </ul>
    </li>
    <li><a href="sprt.html">SUPPORT</a></li>
  </ul>
</nav>

<p>Note: under construction</p>

<table class="darkTable">
  <thead>
    <tr>
      <th colspan="3">Latest Forum Posts</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><i class="bi bi-rss"></i></td>
      <td>New Template is now Revamped!<br>Replies: 7777 | Views: 8888</td>
      <td>~ Mr.Owl</td>
    </tr>
    <tr>
      <td><i class="bi bi-rss"></i></td>
      <td>Exciting News about Upcoming Tournament!</td>
      <td>~ GamingAdmin</td>
    </tr>
    <tr>
      <td><i class="bi bi-rss"></i></td>
      <td>Important Security Update: Please Read!</td>
      <td>~ ITSupport</td>
    </tr>
    <tr>
      <td><i class="bi bi-rss"></i></td>
      <td>Discussion: Best Gaming Moments of the Year</td>
      <td>~ GamingEnthusiast</td>
    </tr>
    <tr>
      <td><i class="bi bi-rss"></i></td>
      <td>Feedback Needed: Website Redesign Proposal</td>
      <td>~ UXDesigner</td>
    </tr>
    <tr>
      <td><i class="bi bi-rss"></i></td>
      <td>Breaking News: Exclusive Game Release Announcement!</td>
      <td>~ GamingJournalist</td>
    </tr>
    <tr>
      <td><i class="bi bi-rss"></i></td>
      <td>Update: Server Maintenance Scheduled for Tomorrow</td>
      <td>~ SystemAdmin</td>
    </tr>
    <tr>
      <td><i class="bi bi-rss"></i></td>
      <td>Reminder: Monthly Community Meetup This Saturday</td>
      <td>~ EventOrganizer</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Thiết kế website giá rẻ

Danh mục

How to get the submenu to work with clippath when using it as a design as apposed to images