JSFiddle - React, Tailwind, and code Playground

by Jens Grochtdreis

HTML

<div id="navcnt">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a>
                <ul class="child">
                    <li><a href="#">Hard Drives</a></li>
                    <li><a href="#">Monitors</a></li>
                    <li><a href="#">Speakers</a>
                        <ul class="child">
                            <li><a href="#">10 watt</a></li>
                            <li><a href="#">20 watt</a></li>
                            <li><a href="#">30 watt</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Random Equipment</a></li>
                </ul>
            </li>
            <li><a href="#">Services</a>
                <ul class="child">
                    <li><a href="#">Repairs</a></li>
                    <li><a href="#">Installations</a></li>
                    <li><a href="#">Setups</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
 
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quia ad similique sit aperiam ab nihil facilis fugit modi ratione suscipit eum reprehenderit corrupti facere temporibus dolore quasi delectus et.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur illum adipisci nesciunt facere consequatur porro necessitatibus eligendi alias facilis quibusdam itaque corrupti sed! Qui incidunt similique recusandae suscipit quisquam alias.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque voluptate cum. Nihil rerum optio beatae consequuntur eius molestiae corporis pariatur officiis quaerat dolore reiciendis voluptatem repellat et recusandae veniam?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quia ad similique sit aperiam ab nihil facilis fugit modi ratione suscipit eum...

CSS

#navcnt {
	position: fixed; 
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
}

#nav li {
    list-style:none;
    float: left;
}
#nav li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
}
#nav li a:hover {
	opacity:1;
}

/* Targeting the first level menu */
#nav {  
    min-width:850px;
    background:#fff;
/*		opacity: 0.5;*/
    display: block;
    height: 34px;
    z-index: 100;
/*    position: absolute;*/
}
#nav > li > a {
    font-size:20px;
     font-weight:normal;
}
#nav > li > a:hover
{
    font-size:20px;
     font-weight:normal;
     color:#F58113;
}

/* Targeting the second level menu */
#nav li ul {
    color: #333;
    display: none;
    position: absolute; 
    width:850px;
}
#nav li ul li {
    display: inline;
}
#nav li ul li a {
    background: #fff;
    border: none;
    line-height: 34px;
    margin: 0;
    padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
    
    color:#F58113;
}

/* Third level menu */
#nav li ul li ul{
    top: 0;
}
ul.child {
background-color:#FFF;  
}
/* A class of current will be added via jQuery */
#nav li.current > a {
    background: #f7f7f7;
    float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
    left:0;
    top:50px;
    display:inline;
    position:absolute;
    text-align:left;
    width: 100%;
}
#nav li:hover > ul.grandchild  {
    display:block;
}