JSFiddle - React, Tailwind, and code Playground

by nicorellius

HTML

<div id="nav-top"><ul><li class="not-active"><a href="">Product1</a><ul><li class="not-active" id="home-sub"><a href="">Testimonials</a></li><li class="not-active" id="home-sub"><a href="">Why Choose Us?</a></li><li class="not-active" id="home-sub"><a href="">Company</a></li></ul></li><li class="not-active"><a href="">Products</a><ul><li class="not-active" id="products-sub"><a href="">Product1</a></li><li class="not-active" id="products-sub"><a href="">We Distribute</a><ul class="dist-sub"><li><a href="">value1</a></li><li><a href="">value2</a></li><li><a href="">value3</a></li></ul></li></ul></li><li class="not-active"><a href="">Users</a><ul><li class="not-active" id="user-sub"><a href="">New Users</a></li><li class="not-active" id="user-sub"><a href="">Existing Users</a></li><li class="not-active" id="user-sub"><a href="">Scientists</a></li><li class="not-active" id="user-sub"><a href="">Researchers</a></li></ul></li><li class="not-active"><a href="">FAQs</a><ul><li class="not-active" id="faq-sub"><a href="" target="_blank">Product1 FAQs</a></li></ul></li></ul></div>

CSS

.product-navigation {
    float: left;
    width: 130px;
    height: auto;
    border-right: solid gray 2px;
    padding: 0px 10px 0px 25px;
    margin-top: 20px;
}

.product-navigation li {
    padding-top: 5px;
    padding-bottom: 5px;
}

.product-navigation li a:hover {
    color: black;
    font-weight: bold;
}

/***** ids *****/

#nav-top {
    margin-top: 4px;
    background: #5A633C url('../images/trans1.png') repeat-x 0 -10px;
    border-bottom: 0px solid #fff;
    height: 20px;
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    float: left;
    line-height: 1.4em;
    padding: 10px 20px;
    width: 890px;
}

#nav-top a {
    clear: right;
    color: #fff;
    display: block;
    float: left;
    letter-spacing: 0px;
    margin: 0;
    padding: 8px 10px 5px 10px;
    text-decoration: none;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3em;
}

#nav-top ul {
    margin: -5px 0px 0px 0px;
    z-index: 999;
    list-style: none;
    padding: 0px;
}

#nav-top li {
    display: inline;
    margin: 0px 2px 0px 0px;
    padding: 0;
}

#nav-top li:hover ul, #nav-top li.sfhover ul { 
    left: auto;
}

#nav-top li:hover {
    background-color: #2c333a;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

#nav-top li#non-products:hover {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

#nav-top li#products-sub:hover, #nav-top li#home-sub:hover,
#nav-top li#faq-sub:hover, #nav-top li#user-sub:hover,
#nav-top ul.dist-sub li:hover {
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
}

#nav-top...