JSFiddle - React, Tailwind, and code Playground

by denislexic

HTML

<header>            
        <div class="wrapper">
            <ul class="h_menu" id="navbar">
                <li><a href="#">Home</a></li>
                <li><a href="#">Dropdown<span></span></a>
                    <ul>
                        <li><a href="#">(half)</a></li>
                        <li><a href="#">(full)</a></li>
                        <li><a href="#">(icon)</a></li>
                    </ul>
                </li>
            </ul>
        </div>
</header>

CSS

header{ background: #E3E3E3; width: 100%; height: 30px; position: fixed; z-index: 5; display:block;
-webkit-box-shadow: 0px 2px 5px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px 2px 5px 3px rgba(0, 0, 0, .2);
box-shadow: 0px 2px 5px 3px rgba(0, 0, 0, .2); }
.wrapper{ width: 90%; min-width: 960px; position:relative; }
.h_menu{ float: left; margin: 0px; padding: 0px; margin-left: 30px; }
.h_menu li{ float: left; list-style: none; margin: 0px; padding: 0px; }
.h_menu li a{ display: block; font-size: 18px; font-weight: bold; padding: 3px 10px; border-left: 1px solid #E3E3E3; border-right: 1px solid #E3E3E3; }
.h_menu li a span{ border-color: #3366CC transparent transparent; border-style: solid dashed dashed; margin-left: 5px; position: relative; top: 5px; }
.h_menu li a:hover{ background: white;  border-left: 1px solid #CACACA; border-right: 1px solid #CACACA; }
.h_menu li ul { display: none;  width: 200px; background-color: white; }
.h_menu li:hover ul { display: block; position: absolute; border-left: 1px solid #CACACA; border-right: 1px solid #CACACA; border-bottom: 1px solid #CACACA; margin: 0; padding: 0; background-color: #ffffff; }
.h_menu li:hover li { float: none; }
.h_menu li:hover li a { background-color: white; color: #333; font-size: 1.4em; font-weight: normal; }
.h_menu li li a:hover { background-color: #D1E9F6; }