JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://vadikom.github.io/smartmenus/src/jquery.smartmenus.js"></script>
<link rel="stylesheet" href="https://vadikom.github.io/smartmenus/src/css/sm-core-css.css">
<link rel="stylesheet" href="https://vadikom.github.io/smartmenus/src/css/sm-blue/sm-blue.css">
<div id="divMenu">
<ul class="level1">
<li><a title="Homepage" href="/SNV/index.aspx">Homepage</a></li><li>
<a title="Main vehicles page" href="/SNV/Vehicles/vehicles.aspx">
Vehicles</a><ul class="level3">
<li><a href="/SNV/Vehicles/New_Vehicles.aspx">New Vehicles</a></li><li>
<a href="/SNV/Vehicles/Used_Vehicles.aspx">Used Vehicles</a><ul
class="level4">
<li><a href="/SNV/Vehicles/Side_Entry_Vehicles.aspx">Side Entry</a></li><li>
<a href="/SNV/Vehicles/Rear_Entry_Vehicles.aspx">Rear Entry</a></li>
</ul>
</li>
<li><a href="/SNV/Vehicles/mv_1.aspx">MV-1</a><ul class="level4">
<li><a href="/SNV/Vehicles/mv_1/se_standard_edition.aspx">SE Standard
Edition</a></li>
</ul>
</li>
<li><a href="/SNV/Vehicles/Rentals_Accessible_Van.aspx">Accessible Van
Rentals</a></li><li><a href="/SNV/Vehicles/Commercial_Vans.aspx">
Commercial Vans</a><ul class="level4">
<li><a href="/SNV/Vehicles/Norcal_Ford_Transit_Connect.aspx">Norcal Ford
Transit Connect</a></li><li><a href="/SNV/Vehicles/Nissan_NV.aspx">Nissan
NV</a></li>
</ul>
</li>
<li><a...
CSS
#main-menu {
position:relative;
z-index:9999;
width:auto;
}
#main-menu ul {
width:12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
}
JavaScript
$(function() {
$('#divMenu > ul').attr('id', 'main-menu').addClass('sm sm-blue').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});