I'm currently designing a responsive navigation bar with a dropdown feature that expands on hover. However, I've encountered an issue as this hover effect is not ideal for mobile devices. Therefore, I am looking to modify my navigation bar so that it expands on click instead of hover.
I attempted to implement the checkbox method but faced difficulties in getting it to function properly. Ideally, I would like to achieve this using only HTML and CSS if feasible. Any assistance on this matter would be greatly appreciated!
Take a look at the implementation here: JSFiddle
HTML:
<ul id="navigation">
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">rx.com </a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Copay Cards</a></li>
</ul>
</li>
<li><a href="#">Product 2</a>
<ul>
<li><a href="#">e.com </a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Copay Cards</a></li>
<li><a href="#">Informational Video</a></li>
</ul>
</li>
... (remaining HTML code)
CSS:
/* Main Navigation */
#nav {
position:relative;
width:620px;
margin:0 auto;
margin-top:50px;
padding:10px;
}
ul#navigation {
margin:0px auto;
position:relative;
float:left;
}
... (remaining CSS code)