请使用css写一个多级的下拉菜单

/* Basic Styling for the menu */
.menu {
  display: inline-block;
  position: relative; /* Important for positioning submenus */
}

.menu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block; /* Or block for vertical menu */
  position: relative; /* Important for positioning submenus */
}

.menu a {
  display: block; /* Make the entire li clickable */
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

/* Styling for submenus */
.submenu {
  display: none; /* Initially hidden */
  position: absolute;
  left: 0; /* Align left to parent */
  top: 100%; /* Position below parent */
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1; /* Ensure it's on top of other elements */
  min-width: 150px; /* Ensures submenu has minimum width */
}

.menu li:hover > .submenu {
  display: block; /* Show submenu on hover */
}

/* Styling for nested submenus (level 3 and beyond) */
.submenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.submenu li {
  display: block; /* Submenu items are block-level */
  position: relative; /* For further nesting if needed */
}

.submenu .submenu {
  left: 100%; /* Position to the right of parent submenu */
  top: 0;  /* Align top with parent submenu item */
}


/* Optional: Some visual enhancements */
.menu li:hover > a {
  background-color: #eee;
}

.submenu li:hover > a {
  background-color: #ddd;
}

/* Example of adding a separator */
.submenu li.separator {
    height: 1px;
    background-color: #ccc;
    margin: 5px 0;
    padding: 0;
}

.submenu li.separator > a {
    display: none; /* Hide the link for separator items */
}

<div class="menu">
  <ul>
    <li><a href="#">Item 1</a>
      <ul class="submenu">
        <li><a href="#">Subitem 1.1</a></li>
        <li><a href="#">Subitem 1.2</a></li>
        <li><a href="#">Subitem 1.3</a>
          <ul class="submenu">
            <li><a href="#">Subitem 1.3.1</a></li>
            <li><a href="#">Subitem 1.3.2</a></li>
          </ul>
        </li>
        <li class="separator"></li> <li><a href="#">Subitem 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
      <ul class="submenu">
        <li><a href="#">Subitem 3.1</a></li>
        <li><a href="#">Subitem 3.2</a></li>
      </ul>
    </li>
  </ul>
</div>

Key improvements and explanations:

• Cleaned up and simplified CSS: More concise and easier to understand.
• Clearer submenu positioning: Uses top: 100% and left: 0 for top-level submenus, and left: 100% and top: 0 for nested submenus for predictable placement.
• Minimum width for submenus: min-width: 150px; ensures the submenus have enough space, especially for longer text.
• Added separator example: Shows how to add a separator line within a submenu for better visual organization. The separator uses a list item with a special class and some styling to create the line.
• HTML structure clearly demonstrates nesting: The HTML example shows how to nest submenus within other submenus to create