JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">


    <title>Best News Ever!</title>
    <link rel="stylesheet" href="css/style1.css" />
  </head>

  <body>
       <header id="main-header">
            <h1 id="site-title">Best News Ever!</h1>
            <ul class="profile-menu">
              <li> <a class="profile-menu-trigger" data-trigger="dropdown" href="#"> Logged in as nick </a> </li>
              <ul class="profile-submenu submenu">
                <li><a href="#">My Account</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Log out</a></li>
              </ul>

            </ul>
       </header>

       <script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>

       <script src="js/main.js"> </script>


   </body>


</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Bahianita&display=swap');


body {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300 !important;
  margin-top: 100px;
  }

body h1 {
  font-weight: 300;
  margin: 20px 30px;
  margin-bottom: 0px;
}

#main-header {
  border-bottom: 2px solid #00f;
  position: absolute;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  top: 0px;
}

#site-title {
  display: inline-block;
}

a {
  text-decoration: underline;
  text-decoration-color: #000;
  text-decoration-style: solid;
}

.profile-menu {
  list-style: none;
  float: right;
  margin-top: 30px;
  margin-right: 20px;
}

.profile-menu a {
  padding-bottom: 35px;
}

.submenu {
  list-style: none;
  padding: 0px;
  border: 1px solid #aaa;
  background: #fff;
  margin-top: 30px;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, .3);
  width: 300px;
  position: absolute;
  right: 10px;
  display: none;
}

.submenu.active {
  display: block;
}

.submenu a {
    text-decoration: none;
    padding: 10px 10px;
    display: block;
    color: #333;
    text-shadow: none;
    font-weight: 600;
    letter-spacing: 0px;
}

.submenu a:hover {
  background: #eee;
}

JavaScript

$ (document) .ready (function () {

    $ ('[data-trigger="dropdown"]'). on ('mouseenter', function () {
        let submenu = $ (this).parent ().find ('.submenu');
        submenu.fadeIn (500);

        $ ('.profile-menu'). on ('mouseleave', function () {
          submenu.fadeOut (500);
        });
    });

});