JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<ul>
    <li>
        <a href="#">Home</a>        
    </li>
    <li>
        <a href="#">Products</a>
        <ul>
            <li><a href="#">Product 1</a> </li>
            <li><a href="#">Product 2</a> </li>
        </ul>
    </li>
</ul>

CSS

ul{
    list-style-type:none;
    padding:0px;   
}
li{
    display:inline;
}
li a {
    font-family:verdana;
    font-size:12px;
    text-decoration:none;
}
li a:hover {
    font-family:verdana;
    font-size:12px;
    text-decoration:underline;
}
li ul li{
    margin-left:40px;
    background-color:#a2a2a2;
    width:30px;
    color:white;
    padding:5px;
    margin-top:25px;
    height:30px;
    font-family:verdana;
    font-size:12px;
}
li ul li a{
    text-decoration:none;
}
li ul li a:hover{
    text-decoration:none;
    color:red;
}