If you're already using unordered lists for your top-level nav items, I recommend sticking with that format as you go deeper into the hierarchy. Changing things up unnecessarily will only add complexity to your code. However, if you do want to continue with your current structure (using My Work > Websites as an example), consider putting the link inside a container and hiding the sub-menu within that container. This will allow you to easily target the sub-menu when the link is clicked or hovered over.
<!-- just a snippet -->
<span class="sdt_descr">My work</span>
</span>
</a>
<div class="sdt_box">
<div class="nameThisSomethingMeaningful">
<a href="#">Websites</a>
<div class="hiddenSubmenu">
<a href="amazingthingImade.com">Amazing Website</a>
<!-- more links here -->
</div>
<div>
<div class="nameThisSomethingMeaningful">
<a href="#">Illustrations</a>
<div class="hiddenSubmenu">
<a href="mysite.com/illustration/client1">Client Work 1</a>
<!-- more links here -->
</div>
<div>
<!-- etc. etc. -->
<!-- now the JS -->
<script>
$(document).ready(function(){
$(".sdt_box a").on("click", function(){ // feel free to use mouseenter or mouseleave, or w/e
$(this).parent().find(".hiddenSubmenu").fadeIn();
});
});
</script>
However, for simplicity and consistency in your navigation structure, it's best to treat each level of the menu the same way. Since you're already using <li>s for the top-level nav, I suggest continuing that pattern to maintain a natural hierarchy without having to deal with complex DOM traversal. Here's how you can approach it:
<nav>
<ul>
<li><a href="#">Portfolio</a>
<ul class="subMenu">
<li><a href="#">Websites</a>
<ul class="subSubMenu">
<li><a href="...">Client 1</a></li>
<li><a href="...">Client 2</a></li>
<li><a href="...">Client 3</a></li>
</ul>
</li>
<li><a href="#">Illustration</a>
<ul class="subSubMenu">
<li><a href="...">Client 1</a></li>
<li><a href="...">Client 2</a></li>
<li><a href="...">Client 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Some Other Menu</a>
<ul class="subMenu">
<li><a href="#">Some Other Submenu</a>
<ul class="subSubMenu">
<li><a href="...">Client 1</a></li>
...
To create a visually appealing layout with proper hierarchy, utilize CSS positioning techniques like relative and absolute positioning. This will help communicate the menu structure effectively. You seem familiar with CSS, but here's a rough version of how you could replicate your current layout along with a third-level submenu floating to the right of the item:
/* basic boilerplate stuff */
* { box-sizing: border-box;
margin: 0px; padding: 0px;
font-family: Helvetica, Arial, sans-serif;
}
a {
color: #aaa;
font-weight: 600;
transition-duration: .3s;
text-decoration: none;
}
/* end of boilerplate */
nav li {
...
}
https://i.sstatic.net/jpbXd.png
For a more detailed implementation with JavaScript handling hover effects, check out this source code:
Simply click on "view code" at the top right.