JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menuDiv">
    <ul class="menu">
        <li><a href="#">Channels</a>

            <ul>
                <li><a href=""><img src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/16/Telephone.png" alt=""/><span>Channels 1</span></a>
                </li>
                <li><a href=""><img src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/16/Telephone.png" alt=""/><span>Channels 2</span></a>
                </li>
                <li><a href=""><img src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/16/Telephone.png" alt=""/><span>Channels 3</span></a>
                </li>
                <li><a href=""><img src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/16/Telephone.png" alt=""/><span>Channels 4</span></a>
                </li>
                <li><a href=""><img src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/16/Telephone.png" alt=""/><span>Channels 5</span></a>
                </li>
                <li><a href=""><img src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/16/Telephone.png" alt=""/><span>Channels 6</span></a>
                </li>
                <li><a href=""><img src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/16/Telephone.png" alt=""/><span>Channels 7</span></a>
                </li>
                <li><a href=""><img src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/16/Telephone.png" alt=""/><span>Channels 8</span></a>
                </li>
                <li><a href=""><img src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/16/Telephone.png" alt=""/><span>Channels 9</span></a>
                </li>
                <li><a href=""><img src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/16/Telephone.png" alt=""/><span>Channels 10</span></a>
                </li>
                <li><a href=""><img...

CSS

* {
    margin:0px;
    padding:0px;
    border:0px;
}
.clear {
    clear:both;
}
body {
    font-size:12px;
    font-family:Verdana, Geneva, sans-serif;
    color:#333;
    background:#FFF;
}
.menuDiv {
    width:500px;
    margin:0 auto 0;
    background:#FFF;
    color:#757373;
    border:1px solid #ccc;
    text-decoration:none;
    float:left;
    background:#06C;
}
.menu {
    width:auto;
    list-style:none;
}
.menu li {
    margin:0px;
    float:left;
    padding:10px;
    color:#FFF;
    text-transform:uppercase;
    border-radius:5px;
    display:block;
}
.menu li a {
    padding:5px 10px 5px 10px;
    text-decoration:none;
    text-transform:uppercase;
    border-radius:5px;
    color:#FFF;
}
.menu li > a:hover {
    background:#09C;
    border-radius:5px;
}
.menu li ul {
    display:none;
}
.menu li:hover ul {
    display:block;
    width:200px;
    list-style:none;
    height:auto;
    border:1px solid #ccc;
    position:absolute;
    left:0;
    top:37px;
}
.menu li:hover ul li {
    background:#f3f1f2;
    border-radius:0px !important;
    padding:0px;
    width:100%;
}
.menu li:hover ul li a {
    text-decoration:none;
    color:#666;
    border-radius:0px !important;
     display:block !important;
}
.menu li:hover ul li img {
    border:0px;
    position:absolute;
}
.menu li:hover ul li span {
    padding-left:20px;
}
.menu li:hover ul li a:hover {
    border-radius:0px !important;
   
}