I am looking to enhance the sub-menus like PRODUCT 1, PRODUCT 2, etc. by adding side menus that appear when hovering over them. Can anyone assist with implementing this feature in the code below?
Below is the current code snippet:
CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600, 300);
@charset"UTF-8";
/* CSS Styles */
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family:'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 300px;
margin-left: 90px;
background: #A3FFFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 3px;
padding: 3px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#cssmenu > ul > li {
margin: 0 0 3px 0;
}
#cssmenu > ul > li:last-child {
margin: 0;
}
#cssmenu > ul > li > a {
// CSS styles for menu items
}
...
JS:
// JavaScript code snippet
(function ($) {
$(document).ready(function () {
$('#cssmenu > ul > li > a').click(function () {
// Click event logic
});
});
})(jQuery);
HTML:
<!-- HTML structure -->
<div id='cssmenu'>
<ul>
<li class='has-sub'>
<a href='#'><span>CENTRAL COMPLIANCE</span></a>
<ul>
<!-- Sub-menu items -->
</ul>
</li>
...
</ul>
</div>
If you can help me customize this code further, I would appreciate it. Thank you.