.menu {
      position: relative;
      background: rgba(0,0,0,0.8);
      border-radius: 8px;
      padding: 8px 0;
      min-width: 200px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      display: inline-block;
    }

    .menu-item {
      padding: 10px 20px;
      cursor: pointer;
      color: white;
      position: relative;
      white-space: nowrap;
    }

    .menu-item:hover {
      background: rgba(255,255,255,0.15);
    }

    .submenu {
      position: absolute;
      top: 0;
      left: 100%; /* default: open right */
      background: rgba(0,0,0,0.9);
      border-radius: 8px;
      padding: 8px 0;
      min-width: 180px;
      opacity: 0;
      transition: opacity 0.2s ease;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      pointer-events: none;
    }

    .vividMenu.open,
    .vividMenu.open > ul,
    .vividMenu.open li,
    .menu-item.has-submenu:hover > .submenu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }