I have almost finished styling a tree view menu using CSS. However, I am facing an issue where the tree only expands on mouseover. I want to be able to open and close the tree by clicking on the link.
Here is my HTML:
<div id="global-nav">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href='#' class="sidemenu-sub-menu-header">Four</a>
<ul>
<li><a href="#">1.2 One</a></li>
<li><a href="#">1.2 two</a></li>
</ul></li>
</ul>
</div>
My CSS:
.sidemenu-sub-menu-header { font-weight: bold; color: black;}
#global-nav {font-size: 17px; }
#global-nav ul li{padding: 2px 10px 2px 10px;}
#global-nav ul ul li{ display: none;}
#global-nav li:hover ul li { display: block; }
I just need a simple script that can toggle open and close the menu. Any help is appreciated. Thanks!