JSFiddle - React, Tailwind, and code Playground
HTML
Menu
<div class="moto-widget moto-widget-menu moto-preset-3 moto-align-left moto-spacing-top-small moto-spacing-right-auto moto-spacing-bottom-small moto-spacing-left-auto" data-preset="3" data-widget="menu" data-align="{"desktop":"left","tablet":"","mobile-h":"","mobile-v":""}"
data-menu-id="3" data-menu-type="horizontal" data-spacing="sasa"> <a href="#" class="moto-widget-menu-toggle-btn"><i class="moto-widget-menu-toggle-btn-icon fa fa-bars"></i></a>
<ul class="moto-widget-menu-list moto-widget-menu-list_horizontal">
<li class="moto-widget-menu-item"> <a class="moto-widget-menu-link moto-widget-menu-link-level-1 moto-widget-menu-link-submenu moto-link">Lieferung TEST<span class="fa moto-widget-menu-link-arrow"></span></a>
<ul class="moto-widget-menu-sublist">
<li class="moto-widget-menu-item"> <a class="moto-widget-menu-link moto-widget-menu-link-level-2 moto-link">Test</a> </li>
<li class="moto-widget-menu-item"> <a class="moto-widget-menu-link moto-widget-menu-link-level-2 moto-widget-menu-link-submenu moto-link">Test<span class="fa moto-widget-menu-link-arrow"></span></a>
<ul class="moto-widget-menu-sublist">
<li class="moto-widget-menu-item"> <a class="moto-widget-menu-link moto-widget-menu-link-level-3 moto-link">Test</a> </li>
</ul>
</li>
</ul>
</li>
<li class="moto-widget-menu-item"> <a class="moto-widget-menu-link moto-widget-menu-link-level-1 moto-widget-menu-link-submenu moto-link">sssss<span class="fa moto-widget-menu-link-arrow"></span></a>
<ul class="moto-widget-menu-sublist">
<li class="moto-widget-menu-item"> <a class="moto-widget-menu-link moto-widget-menu-link-level-2 moto-link">Test</a> </li>
</ul>
</li>
<li class="moto-widget-menu-item"> <a class="moto-widget-menu-link moto-widget-menu-link-level-1 moto-widget-menu-link-submenu moto-link">sssssssssss<span...
CSS
<script type="text/javascript" src="http://www.google.com/jsapi">
</script> <script type="text/javascript">google.load("jquery", "1.4.1");
</script> <style type="text/css"> .moto-widget-menu.moto-preset-3 .moto-widget-menu-list {
background-color: transparent;
}
.moto-widget-menu.moto-preset-3 .moto-widget-menu-list .moto-widget-menu-item .moto-widget-menu-link-level-1 {
font-family: "Ubuntu", sans-serif;
font-size: 12px;
font-weight: 400;
text-align: left;
letter-spacing: 0;
line-height: 0.8;
color: rgba(77, 77, 77, 0.7);
display: block;
width: 19em;
padding: 0 35px;
line-height: 1.5;
float: left;
transform: translateY(-50%);
border-bottom: 1px solid #d6d6d6;
}
.moto-widget-menu.moto-preset-3 .moto-widget-menu-list .moto-widget-menu-item .moto-widget-menu-link-level-1:last-child {
border-bottom: none;
}
.moto-widget-menu.moto-preset-3 .moto-widget-menu-list .moto-widget-menu-item .moto-widget-menu-link-level-1:hover {
color: black;
}
.moto-widget-menu.moto-preset-3 .moto-widget-menu-sublist .moto-widget-menu-item .moto-widget-menu-link {
font-family: "Ubuntu", sans-serif;
font-size: 12px;
font-weight: 400;
text-align: left;
letter-spacing: 0;
line-height: 0.8;
color: rgba(77, 77, 77, 0.7);
width: 19em;
padding: 0 35px;
line-height: 1.5;
float: left;
transform: translateY(-50%);
border-bottom: 1px solid #d6d6d6;
}
.moto-widget-menu.moto-preset-3 .moto-widget-menu-sublist .moto-widget-menu-item .moto-widget-menu-link:hover {
color: green;
background: white;
}
</style>