Fix HTML Hover Drop Down Menu Issue for iOS Devices using CSS only and no JavaScript

After I first setup this website and got it up running how I wanted, I decided to navigate thru it on my iPad to see how it looked. Across the top, I have some navigation buttons, which are just simple links that you can click and follow, which all worked as expected on my iPad, except for the one that says More Stuff. On a desktop or laptop, if you hover your mouse over the More Stuff button, an additional list of links will automatically drop down. But the problem with iOS devices, is that they do not use a mouse and therefore have no “hover” event, so this particular button appeared dead on my iPad and did nothing when you tapped it.

I am really not opposed to using JavaScript solutions, but when I came across this solution that used only CSS, it intrigued me enough to try and implement it.

Thanks to Philip Renich at elfboy.com for the post where I got this information from:Click here to go to original article
The best way I can explain how it works, is that you need to setup the <ul> tag as display:none; and then when it is tapped, it changes to display:block;.

You also need to wrap the button name in an <a> tag so it is clickable, but set the href="#" so it does not actually do anything when you click it.

And lastly, may need to adjust what the <a> tag looks like when you hover over it (for example, I do not want it to be underlined like the rest of the links on my site when you hover over it, so I used text-decoration:none;

@jessie – Your code will not show in the comments, as it does not let you post code.
I took a stab at it myself though, and could not get it to work either. I am not a guru by any means when it comes to this stuff. I am sure it can be done, but I think you might have to go with google on this one to figure it out. Also, stackoverflow.com is a great place to post questions and get answers from people who actually know what they are talking about.

Hi, sorry but I tried to get this to work and maybe I am just not comfortable enough with CSS. The first drop down is from scrolling over “More Stuff” and when I try to add another level to the drop-down menu I cannot get it to work properly.
Below I have copied the code in my attempt to add another level, but I cannot seem to get it to work.

@jake @jessie Thanks for the comments! I just fixed the code above so it shows properly, as I just noticed it does not look right. Hopefully this will make is easier for you to see how to implement more sub menus yourself.