JSFiddle - React, Tailwind, and code Playground

by Shanna Barnard

HTML

<div class="menu">
<div id="menu">
<nav>
    <ul>

        <li><img class="menu" src="work.png" />
                <ul>
                        <li><a href="#">ABOUT US</a></li>
                        <li><a href="#">OTHER ONE</a></li>
                </ul>
        </li>  
    </ul>
</nav>
</div>
</div>

CSS

#menu * { 
    padding:0; 
    margin: 0; 
    font: 12px "Typola"; 
    list-style-type:none;}

#menu { 
    margin-top: 300px;
    float: left;
    line-height: 10px; 
    left: 200px;}

#menu a { 
    display: block; 
    text-decoration: none; 
    color: #FAFAFA;
}

#menu img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

#menu a:hover {background: blue;}

#menu ul li ul li:hover { 
    //remove the padding which is causing the indentation
}

#menu ul li ul li {
    width: 140px; 
    border: none; 
    color: #E80C0C;  
    padding-top: 3px; 
    padding-bottom:3px; 
    padding-left: 3px; 
    padding-right: 3px; 
    background: #E80C0C;
    z-index:1;
}

#menu ul li ul li a { 
    font: 20px "Europe Underground"; 
    padding-top:1px; 
    padding-bottom:1px;
}

#menu ul li {
    float: left; 
    width: 30px; 
    font-weight: bold; 
    border-top:none; 
    border-bottom:none; 
    background: #E80C0C;}

#menu ul li a { 
    font-weight: bold;
    padding: 15px 10px;}

#menu li{ 
    position:relative; 
    float:left;}

#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ 
    display:none;
    list-style-type:none; 
    width: 140px;}

#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
    display:block;}

#menu:hover ul li:hover ul li:hover ul { 
    position: absolute;
    margin-left: 145px;
    margin-top: -22px;
    font: 10px;}

#menu:hover ul li:hover ul { 
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom:100%;
}

#menu>ul>li:hover>ul { 
    bottom:100%;
    border-bottom: 1px solid transparent
}