As a beginner in CSS and HTML, I am struggling with creating a clickable menu for devices. The menu will be nested under a hamburger icon and needs to have multiple levels of nesting. While I successfully implemented the top-level dropdown menu following a tutorial, I am facing difficulties with the deeper nested list. Can anyone provide assistance?
Here is how my HTML looks:
<nav id="MainNavigation">
<a href="#" id="menuIcon"><img src="images/menu_logo_webb_design.svg" alt="Menu icon"></a>
<ul id="dropDownMenu">
<li>
<a href="#" title="Woman">Woman
</a>
<li>
<a class="Sub_Menu_Link" href="#" title="Womanplus">+
</a>
<ul>
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
</ul>
</li>
</li>
<li> <a href="#" title="Man">Man</a>
<li>
<a class="Sub_Menu_Link" href="#" title="Manplus">+
</a>
<ul>
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
</ul>
</li>
</li>
<li><a class="Sub_Menu_Link" href="#" title="Sale">Sale</a></li>
</ul>
</nav>
And here is my CSS:
nav>a{
display:block;
background-color:red;
padding: 0 20px;
}
nav ul.open{
display:block;
}
...
//CSS code continued
Lastly, my JQuery code:
// JavaScript Document
$(document).ready(function(){
$("nav a").on("click", function(){
$("nav > ul").toggleClass("open");
});
$(" .Sub_Menu_Link").on("click", function(){
$("nav ul>ul").toggleClass("open");
});
});