JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="menu-wrapper">
    <ul class="nav">
        <li><a href='#'>Brands</a>
            <div>
                <div class="nav-column">
                    <ul>
                        <li><a href="index.php?brands=1">Siemens</a>
                        </li>
                        <li><a href="index.php?brands=2">KSB</a>
                        </li>
                        <li><a href="index.php?brands=3">Dadex</a>
                        </li>
                        <li><a href="index.php?brands=4">Hyundai</a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li><a href='#'>Products</a>
            <div>
                <div class="nav-column">
                    	<h3>Automation</h3>
                    <ul>
                        <li><a href="index.php?stypes=1">Logo!</a>
                        </li>
                        <li><a href="index.php?stypes=2">Simatic-S7-200</a>
                        </li>
                        <li><a href="index.php?stypes=3">Simatic-S7-400</a>
                        </li>
                        <li><a href="index.php?stypes=4">Simatic-S7-1200</a>
                        </li>
                        <li><a href="index.php?stypes=5">HMI</a>
                        </li>
                    </ul>
                </div>
                <div class="nav-column">
                    	<h3>Pumps</h3>
                    <ul>
                        <li><a href="index.php?products=7">Etanorm</a>
                        </li>
                        <li><a href="index.php?products=8">KWP</a>
                        </li>
                        <li><a href="index.php?products=9">ZORO</a>
                        </li>
                        <li><a href="index.php?products=10">DWT</a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li><a href="#">About ME</a>
        </li>
       ...

CSS

/* Reset */
 .nav, .nav a, .nav ul, .nav li, .nav div, .nav form, .nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.nav a {
    text-decoration: none;
}
.nav li {
    list-style: none;
}
/* Menu Container */
 #menu-wrapper {
    border:0px solid #000;
    width:870px;
    margin:10px 0px 0px 380px;
}
.nav {
    display: inline-block;
    position: relative;
    margin:30px 0px 0 0px;
    cursor: default;
    z-index: 500;
    border:0px solid #000;
}
/* Menu List */
 .nav > li {
    display: block;
    float: left;
}
/* Menu Links */
 .nav > li > a {
    position: relative;
    display: block;
    z-index: 510;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing:1px;
    color: #434343;
    background: #d8d8d8;
    background-image: -moz-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -webkit-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#afafaf), to(#d8d8d8));
    background-image: -ms-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: -o-linear-gradient(top, #afafaf, #d8d8d8);
    background-image: linear-gradient(top, #afafaf, #d8d8d8);
    border-left: 1px dotted #c8c8c8;
    border-right: 1px dotted #c8c8c8;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.nav > li:hover > a {
    background: #c8c8c8;
}
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}
/* Search Form */
 .nav > li.nav-search > form {
    position: relative;
    width: inherit;
    height: 54px;
    z-index: 510;
    border-left: 1px solid #c8c8c8;
}
.nav > li.nav-search input[type="text"] {
    display: block;
    float: left;
    width: 1px;
    height: 24px;
    padding: 15px 0;
    line-height: 24px;
    font-family:...

JavaScript

$('#menu-wrapper div.nav-column h3').hover(
    function(){
        $(this).parent().siblings().find('ul').css("display","none");
    },
    function(){
        $(this).parent().siblings().find('ul').css("display","");
    }
 );