What is the component library you are using?

If you think the class names are too long, you can use libraries like [cva](https://cva.style) or tailwind variants to make your code cleaner

im using headlessUI

but there is no docs about to make a responsive dropdown menu

You want to hide all the menu items?
Try controlling the open state directly with static: https://headlessui.com/react/menu#showing-hiding-the-menu and implement a wrapper over it. Because headless ui handles the open state, your css might not worked as expected

yes but responsive, so only below md is hidden