Css 无头双下拉UI/顺风和React

我正在使用无标题页面上的下拉示例

下面是适合我的情况的简化代码，但您可以在网站上找到完整代码：

import { Menu, Transition } from "@headlessui/react";
import { Fragment, useEffect, useRef, useState } from "react";
import { ChevronDownIcon } from "@heroicons/react/solid";
const pets= [
    {
      category: 'Animal',
      subcategory: 'Dog',
    },
    {
        category: 'Animal',
        subcategory: 'Cat',
      }
]

function petSelect() {
    return (
       <div className="w-56 text-right fixed top-16">
      <Menu as="div" className="relative inline-block text-left">
        {({ open }) => (
          <>
            <div>
              <Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
                Options
                <ChevronDownIcon
                  className="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100"
                  aria-hidden="true"
                />
              </Menu.Button>
            </div>
            <Transition
              show={open}
              as={Fragment}
              enter="transition ease-out duration-100"
              enterFrom="transform opacity-0 scale-95"
              enterTo="transform opacity-100 scale-100"
              leave="transition ease-in duration-75"
              leaveFrom="transform opacity-100 scale-100"
              leaveTo="transform opacity-0 scale-95"
            >
              <Menu.Items
                static
                className="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
              >
                <div className="px-1 py-1 ">
                {pets.map((pet) => (
                    <Menu.Item>
                        {({ active }) => (
                            <a
                            href="#"
                            className={classNames(
                                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                                'block px-4 py-2 text-sm'
                            )}
                            >
                            {pet.subcategory}
                            </a>
                        )}
                    </Menu.Item>
                ))}
                </div>
              </Menu.Items>
            </Transition>
          </>
        )}
      </Menu>
    </div>
    );
}

export default petSelect;

从“@headlessui/react”导入{Menu，Transition}”；
从“react”导入{Fragment，useffect，useRef，useState}；
从“@heriorons/react/solid”导入{ChevronDownIcon}”；
常数宠物=[
{
类别:"动物",，
子类别：“狗”，
},
{
类别:"动物",，
子类别：“猫”，
}
]
函数petSelect（）{
返回(
{（{open}）=>(
选择权
{pets.map（（pet）=>(
{（{active}）=>(
)}
))}
)}
);
}
导出默认petSelect；

上述代码按所选方式工作。但是，我想添加一个功能，添加一个附加下拉列表，如果宠物中的宠物对象具有子类别，则可以选择该下拉列表。如果它确实有一个子类别，我想要一个二级下拉列表来显示，这将允许用户选择子类别

谢谢