JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="menu">
<li><a href="#">Department</a>
</li>
<li><a href="#">Resources</a>
</li>
<li><a href="#">Technology</a>
</li>
<li> <a href="#">Help</a>
<ul>
<li><a href="#">Desktop Security</a>
</li>
<li><a href="#">Desktop Security 1</a>
</li>
<li><a href="#">Desktop Security 2</a>
</li>
<li><a href="#">Desktop Security 3</a>
</li>
<li><a href="#">Desktop Security 4</a>
</li>
</ul>
</li>
</ul>
CSS
.ui-widget-overlay {
background-color:Fuchsia
}
.ui-widget-header {
background-color:Green
}
.ui-widget-content {
background-color:red
}
.ui-widget-content a {
background-color:red
}
.ui-menu {
overflow: hidden;
width:70%;
background:navy
}
.ui-menu .ui-menu {
overflow: visible !important;
width:200px;
background-color:navy
}
.ui-menu > li {
float: left;
display: block;
width: auto !important;
background-color:navy;
color:red
}
.ui-menu > li {
margin: 5px 5px !important;
padding: 0 0 !important;
width:100px;
background-color:navy
}
.ui-menu > li > a:link {
float: left;
display: block;
clear: both;
overflow: hidden;
color:red;
font-size:12px
}
.ui-menu > li > a:hover {
float: left;
display: block;
clear: both;
overflow: hidden;
color:red;
font-size:12px;
background-color:red
}
.ui-menu .ui-menu-icon {
margin-top: 0.3em !important;
}
.ui-menu .ui-menu .ui-menu li {
float: left;
display: block;
}
.ui-menu .ui-menu > li {
clear:both;
width:200px;
background-color:navy
}
.ui-menu .ui-menu .ui-menu > li {
clear:both;
width:100px
}
.ui-menu > li > ul {
width:220px
}
.ui-menu .ui-menu-item a {
width:200px;
background-color:Orange
}
.ui-menu ui-widget ui-widget-content ui-corner-all {
background-color:black
}
JavaScript
$("#menu").menu({
position: {
at: "left bottom"
}
});