Jump to content

DropDown Menu change hover to click


Recommended Posts

One way to do it is to check for the :focus pseudo-selector on the button: https://www.w3schools.com/code/tryit.asp?filename=G28YN9O8VU3C

It has its drawbacks, but I'd need to know what your expectations are. With Javascript the menu could behave however you like, with CSS there are limitations.

Link to comment
Share on other sites

On ‎3‎/‎19‎/‎2019 at 4:28 PM, dsonesuk said:


Thanks a bunch, as that is exactly what I was looking for.  I know beggars shouldn’t be choosy but if the dropdown is expanded on a mobile device and you scroll the screen, Link 1 of the dropdown is displayed next to the Home link on the menu bar. If the sub dropdown is expanded, and you scroll the screen, Link 1 and the sub dropdown button is displayed next to the Home link on the menu bar.  You can get a similar result if you just shrink your browser window expand one of the dropdowns and then maximize your browser window. The dropdowns stay expanded and can not be closed unless you shrink the browser window and collapse the dropdown.

Now I’m begging some as I know just enough to realize I don’t know enough.   I tried to create a sub dropdown by just copying all the CSS and adding sub to the dropdowns and dropbtns.  It works to some degree, but the submenu content only displays the first sub item on mobile devices. 

I’m sure very few if anyone will be shrinking their browser window on a computer to view the website so this may not matter.  If you make your browser window smaller when the responsive kicks in the sub dropdown is a hover not a click.  However, if you click on the sub dropdown then it becomes clickable and the hover is disabled, unless, the page is reloaded or refreshed.  Also, if you make your browser window smaller so the responsive kicks in if you select one of the dropdowns when you expand the browser window the dropdown you click on no longer works.

I totally understand if you don’t have the time or just don’t want to help.

Here’s what I got going.


Link to comment
Share on other sites

2 hours ago, dsonesuk said:

Anyway to stop the expanded dropdown from jumping to the top of the screen?  On mobile devices as soon as you try to scroll the screen it jumps to the top.  Desktop Internet browser if you shrink the browser for the responsive to kick in and then expand the dropdown then if you maximize the browser it jumps to the top.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...