JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<div id="companymenu">
    	<ul class="companymenuul">
        	<li class="companymenuli aactive"><a class="alisting">Home</a></li>
            <li class="companymenuli"><a class="alisting">Product Categories  <b class="caret"></b></a>
            	<ul class="submenu">
                	<li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            
            </li>
            <li class="companymenuli"><a class="alisting">Company Profile  <b class="caret"></b></a></li>
            <li class="companymenuli"><a class="alisting">Contacts</a></li>
        </ul>
    </div>

CSS

#companymenu
{
	background-color: #999;
	height:35px;
	width:100%;
	margin-top: -10px;
}
.companymenuul
{
	list-style-type: none;
}
.companymenuli
{
	 float: left;
	 display:block;
	 line-height: 35px;
	 padding: 0 15px;
}
.alisting
{
	color:#000;text-decoration:none;
}
.aactive
{
	color: #333;
	background-color: #fff;
	border-top: 2px solid #999;
	margin-top: -2px;
}
.companymenuli a:hover
{
	color:#C63;
	text-decoration:none;
	cursor:pointer;
	padding-top:10px;
	padding-left:24px;
	padding-right: 23px;
	padding-bottom: 11px;
	background-color: #fff;
	border-top: 2px solid #999;
	margin-top: -2px;
}

.companymenuli:hover > ul{
    display:block;
}

.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid #fff;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-top: 15px;
margin-left: 5px;
border-bottom-color: #fff;
filter: alpha(opacity=100);
background-image:url(images/topnav-arrow-down-white-ie6.png)no-repeat 0 0 transparent;
_display: inline;
_zoom: 1;
_width: 7px;
_height: 4px;
_margin-top: 8px;
_margin-left: 5px;
_line-height: 4px;
_border: none;
_vertical-align: baseline;
}

.submenu{
    display:none;
}