Trying out a tutorial to create a mobile dropdown menu.
Encountering an issue when adding new lists inside a previous tag affects the functionality of the dropdown menu. Attempted to adjust the CSS without success.
All the lists are displayed without requiring user interaction when adding a new multi list to the previous tag.
<nav id="nav" role="navigation">
<a href="#nav">Show navigation</a>
<a href="#">Hide navigation</a>
<ul class="clearfix">
<li class="active"><a href="?home">Home</a></li>
<li>
<a href="?blog" aria-haspopup="true"><span>Blog</span></a>
<ul>
<li><a href="?javascript">JavaScript</a></li>
<li>
<a href="?blog" aria-haspopup="true"><span>Test</span></a>
<ul>
<li><a href="?design">One</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="?work" aria-haspopup="true"><span>Work</span></a>
<ul>
<li><a href="?webdesign">Web Design</a></li>
</ul>
</li>
<li><a href="?about">About</a></li>
</ul>
Not including the entire code due to numerous CSS elements. Please refer to the sample code below for reference.
Check out this working example.