Hi,
Yes, it is not a problem to add some CSS rules that will show the sub menus even if JS is disabled (i.e. make it a pure CSS menu). Here is a quick example:
1) You need to include the following rules on the page (these will work well with the default example with a horizontal main menu, otherwise you may need to tweak the sub menus’ width and offset):
/* sub menus defaults */
#main-menu ul {
display:block;
top:auto;
left:-99999px;
width:15em;
height:auto;
overflow:visible;
}
/* first level sub menus offset */
#main-menu li ul {
margin:0;
}
/* second+ level sub menus offset */
#main-menu li ul ul {
margin:-2.7em 0 0 15em;
}
/* show sub menus on hover */
#main-menu li:hover > ul {
left:auto;
}
But make sure they are:
a) either included and linked in a separate CSS file:
</pre>
b) or included in a separate tag:
<pre>
/* the above rules... */
2) Make sure the above styles are removed when JS is supported by adding the following line right before SmartMenus jQuery is initialized for your menu:
// remove pure CSS menu styles
$('#sm-purecss').remove();
// init SmartMenus jQuery
$('#main-menu').smartmenus({ ... });
That’s all. You can try it on the default example in the download package. Please let me know if you have any questions.
Cheers!
.
