Navbar submenus only work with anchor tags, but anchor tags need hrefs, and anchors with hrefs are impossible to hover on mobile

[justingolden21]

Sorry for the long title.

So basically, if I have a nav as similar to in Daisy UI docs:

<li tabindex="0">
					<a class="justify-between">
						Projects
						<Icon name="chevron_right" class="w-4 h-4" />
					</a>
					<ul class="p-2 bg-base-100">
						<li><a href="/projects">All Projects</a></li>
						<li><a href="/projects?sort=popular">Popular</a></li>
						<li><a href="/projects?sort=new">New</a></li>
						<li><a href="/projects?sort=updated">Recently Updated</a></li>
					</ul>
				</li>

Then on line 2 I have <a class="justify-between"> which is an anchor with no href. This is bad for accessibility, will affect SEO, and the linters go nuts over it, in my IDE, in code analysis, on build, etc. so this isn't an option.

Changing to a <span> would work, except on small viewports on desktop I can hover a lower menu, then hover a higher menu and get this:

Where both menus are shown on top of each other, which is less than ideal.

Lastly, I can give the anchor tag an href, but this means on mobile users will not be able to navigate the sub menu.

---

As a side note, I'm having tabindex issues with the submenu, and even giving all elements tabindex="0" doesn't seem to make them focusable.

Thanks in advance, and I absolutely love this component library.

[saadeghi]

@justingolden21 Can you please provide a code sample where you have hover issues with <span> as you mentioned?
Because in this example, I'm using <span> instead of <a> and it works as expected. You should be able to use <span> instead of <a>.

About the "tabindex issues", can you tell me what is exactly the issue? and tell me about your OS and browser version?