JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/font.css">
  <title>Document</title>
</head>
<body>
  <div id="wrapper">
    <ul id="menu">
      <li><a href="#">HTML</a>
        <ul>
          <li><a href="#">HTML 3</a></li>
          <li><a href="#">HTML 2</a></li>
          <li><a href="#">HTML 1</a></li>
        </ul>
      </li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">CSS 1</a></li>
          <li><a href="#">CSS 2</a></li>
          <li><a href="#">CSS 3</a></li>
        </ul>
      </li>
      <li><a href="#">PHP</a>
        <ul>
          <li><a href="#">PHP 1</a></li>
          <li><a href="#">PHP 2</a></li>
          <li><a href="#">PHP 3</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">JavaScript 1</a></li>
          <li><a href="#">JavaScript 2</a></li>
          <li><a href="#">JavaScript 2</a></li>
        </ul>
      </li>
      <li><a href="#">Perl</a>
        <ul>
          <li><a href="#">Perl 1</a></li>
          <li><a href="#">Perl 2</a></li>
          <li><a href="#">Perl 3</a></li>
        </ul>
      </li>
      <li><a href="#">Java</a></li>
    </ul>
  </div>

  <!--File js-->
  <script src="js/main.js"></script>
  <script src="js/jquery-3.2.1.min.js"></script>

</body>
</html>

CSS

body{
    margin:90px;
}
ul#menu{
    margin:0;
    padding:0;
    display: inline-block;
    width: 200px;
    background: #3d3e40;
    border-radius:10px;
}
ul#menu li {
    list-style: none;
    position: relative;
    padding:0;
}

ul#menu li a {
     color: #fff;
    font-size:20px;
    text-decoration: none;
    padding:6px 15px;
    display: block;
    border-top:1px solid #c4c4c4;
 }
ul#menu li:first-child a{
    border:none;
}

ul#menu li a:hover{
    background: #d00000;
}
ul#menu > li:first-child > a:hover{
    border-radius:10px 10px 0 0;
 }
ul#menu > li:last-child > a:hover{
    border-radius: 0 0 10px 10px;
}

ul#menu li ul{
    display: none;
    padding:0;
}
ul#menu li:hover ul {
    width: 150px;
    display: block;
    position: absolute;
    background-color: #28282a;
    border-radius:0 10px 10px 0;
    left: 200px;
    top:1px;
    z-index:1;
}



ul#menu li>ul > li:first-child a:hover{
    border-radius:0 10px 0 0;
}
ul#menu li>ul > li:last-child a:hover{
    border-radius:0 0 10px 0;
}