JSFiddle - React, Tailwind, and code Playground

by Andy Willekens

HTML

<div class="head-menu">
    <ul>       
        <li>
            <a href="/">Home</a>
        </li>
        <li class="active">
            <a href="#">Customer services</a>
            <ul class="head-menu-dropdown">
                <li>
                    <a href="#">FAQ</a>
                </li>                
                <li>
                    <a href="#">Privacy</a>
                </li>
                <li>
                    <a href="#">Payment Methods and Shipping Costs</a>
                </li>
                <li>
                    <a href="#">Terms and conditions</a>
                </li>  
            </ul>
        </li>
        <li>
            <a href="#">Contact</a> 
        </li>        
    </ul>
</div>

CSS

.head-menu {
	float: left;
   	margin:0 0 0 50px;
}

.head-menu ul {
    float: left;
    padding:0;
    list-style:none;
}

.head-menu ul li {
	float: left;
    position: relative;
    margin:0 10px 0 0;
}

.head-menu ul li a, .head-menu ul li span {
	color:#655b4c;
	cursor: pointer;
    display: block;
    font-family: "Arial",Verdana,Helvetica,sans-serif;
    font-size: 11px;
    line-height: 20px;
    padding: 15px 15px 10px 19px;
    /* padding: 15px 15px 25px 19px; OUDE MARGIN ZONDER SUBMENU */
    text-decoration: none;
    font-weight:bold;
    text-transform:uppercase;
   	margin:0 4px 0 0;
}

.head-menu ul li:hover, .head-menu ul li.active {
	background: url("/file/picture/frame/btn/btn-border.png") no-repeat scroll 4px 5px #9d743e;
	border-radius:5px 5px 0px 0px / 5px 5px 0px 0px;
	-webkit-border-radius:5px 5px 0px 0px / 5px 5px 0px 0px;
	-moz-border-radius:5px 5px 0px 0px / 5px 5px 0px 0px;
}

.head-menu ul li:hover a, .head-menu ul li:hover span, .head-menu ul li.active a, .head-menu ul li.active span{
	background: url("/file/picture/frame/btn/btn-border.png") no-repeat scroll right 5px;
	color:#f3fdda;
	margin:0 4px 0 0;
}

.head-menu ul li ul.head-menu-dropdown {
	display:block;
	visibility:visible;
	left: 0px;
	padding: 0px;
    margin:0px;
	position: absolute;
	top: 45px;
	white-space: nowrap;
	background: #9d743e;
	border-top: 2px solid #5a1903;
}


.head-menu ul li ul.head-menu-dropdown li{
	background: none;
	margin: 0px;
	width:100%;
	border-bottom: 2px solid #5a1903;
	white-space:nowrap;
	display:list-item;
	clear:both;
}


.head-menu ul li ul.head-menu-dropdown li:hover{
	border-radius:0;
	background:#691e05;
}

.head-menu ul li ul.head-menu-dropdown li a{
	color:#f3fdda;
	background: none repeat scroll 0 0 transparent;
	font-size:12px;
	padding: 10px 10px 10px 20px;
	display:block;
	height:auto;
	width:auto;
	min-width:100%;
	text-transform: none;
	text-align:left;
}

.head-menu ul li ul.head-menu-dropdown li:hover...