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;

Here is the CSS you will need to add to your style sheet:


#nav_ios ul {
display: none;
}
#nav_ios li:hover ul {
display: block;
}
#nav_ios_no_underline {
text-decoration: none;
}


Here is my HTML navigation menu code that is fixed and works correctly with iPhone and iPad:

<div>
 <ul>
  <li>
   <a title="Home" href="https://www.iwebss.com">Home</a>
  </li>
  <li>
   <a title="BLOG" href="https://www.iwebss.com/blog">BLOG</a>
  </li>
  <li>
   <a title="Contact Us" href="https://www.iwebss.com/contact">Contact Us</a>
  </li>
  <li>
   <ul id="nav_ios">
    <li>
     <a href="#" id="nav_ios_no_underline">More Stuff</a>
     <ul>
      <li>
       <a title="Energy+" href="https://www.iwebss.com/energy">Energy+</a>
      </li>
      <li>
       <a title="Super Maze 3D" href="https://www.iwebss.com/supermaze3d">Super Maze 3D</a>
      </li>
     </ul>
    </li>
   </ul>
  </li>
  <div style="clear:both;height:0px;"><!----></div>
 </ul>
</div>

Let me know if you think this was helpful by leaving a comment!