I think this is what you want

I had change some CSS and JS

CSS

.navinator {
  z-index: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgb(218, 10, 10);
  position: fixed;
  top: 0;
  width: 100%;
  height: 47px;
}
.navElement {
  float: left;
}
.anchor{
  display: block;
  color: white !important;
  text-align: center;
  padding: 14px 16px; 
  text-decoration: none !important;
  cursor: pointer;
}
.anchor:hover {
  background-color: rgb(255, 23, 15) !important;
}
.active {
  background-color: rgb(28, 13, 110) !important;
  float: right;
  width: 120px;
}
.active .anchor{
  align-items: center;
  justify-content: center;
}
.active .anchor:hover {
  background-color: rgb(32, 11, 156) !important;
}
.profile-image {
  width: 30px;
  height: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
#profile {
  color: white !important;
  text-align: center;
  padding: 11px 16px; 
  text-decoration: none !important;
  /* height: 52px; */
  overflow: auto;
}
#profile:hover {
  background-color: rgb(255, 23, 15) !important;
  cursor: pointer;
}
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  margin-top: 10px;
}
.dropdown {
  opacity:0;
  visibility: hidden;
    top: 47px;
    width: 222px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* display: inline-block; */
    background-color: rgb(6, 6, 6);
    position: absolute;
}
.drop-item:hover .dropdown{
  opacity:1;
  visibility: visible;
  transition: all .3s;
}

.dropdown li{
  list-style-type: none;
}

JS

const Navbar = () => (
  <div style={{ zIndex: "1", position: "fixed", display: "flex" }}>
        <ul className="navinator">
          <li className="navElement">
            <a className="anchor" href="/home">
              Home
            </a>
          </li>
          <li className="navElement">
            <a className="anchor" href="/profile">
              Profile
            </a>
          </li>
          <li className="active">
            <a
              className="anchor"
              // href="#"

            >
              + New Post
            </a>
          </li>
          <li class="drop-item" style={{ float: "right" }}>
            <div
              id="profile"
              >
              <div style={{ float: "left", paddingRight: "10px" }}>
                <img
                  src=""
                  alt="error"
                  className="profile-image"
                />

              </div>
              <div style={{ float: "left", paddingRight: "5px" }}>
                whatever
              </div>
              <div style={{ float: "left" }} className="arrow-down"></div>
            </div>
            <div style={{float:"right"}} className="dropdown">

     <li>
        <a className="anchor" style={{ textAlign: "left" }} href="/profile">
          Profile
        </a>
      </li>
      <li>
        <a className="anchor" style={{ textAlign: "left" }} href="/profile">
          Profile
        </a>
      </li>

    </div>
          </li>
        </ul>

      </div>
)

ReactDOM.render(<Navbar />, document.getElementById('root'))

What i solved is, open drop-down when hover over whatever in nav and set its position below it parent on which it hovered

I am running into a problem while writing a simple navbar and dropdown menu in React. I created a section in the nav for an account that, when hovered over, will spawn a dropdown menu immediately below.
I tried copying the code for this directly from the w3 site, but I ran into more problems, and decided to take my own approach…

I created a Dropdown functional component rendered by my Navbar component. The visible/hidden state of the Dropdown component is tracked in a useState variable called hideDropdown.

Up to this point, everything is functioning correctly. My problem arises when trying to align this Dropdown component underneath the account section in the Navbar. No matter what I try, I cannot get it to the right position on screen. Even if I hardcode the amount of pixels that the component should be from the left side, resizing the screen ruins this. By default, the Dropdown component spawns on the left side. Additionally, only the left property has any effect on its position. Right does nothing observable. Also, the percentages do not seem to be based on the width of the page, as in order to align the Dropdown all the way on the right, the left property must be 800%.

https://codepen.io/sjh5888/pen/rNaJgya

Navbar.js

import React, { useState, useContext, useEffect } from "react";
import { Redirect } from "react-router-dom";
import jsonwebtoken from "jsonwebtoken";
import Dropdown from "./Modals/Dropdown";
import "./CSS/navbar.css";
import NewPostModal from "./Modals/NewPostModal";
import { CategoryContext } from "./Context/CategoryContext";

function Navbar(props) {
  const { categories, setCategories, user } = useContext(CategoryContext);
  const [modalOpen, updateModal] = useState(false);
  const [hideDropdown, setHideDropdown] = useState(false); //change to true when done
  const [isLoading, setIsLoading] = useState(true);
  const jwtDecoded = jsonwebtoken.decode(localStorage.getItem("jwt"));

  console.log(
    "is token valid? " +
      (jwtDecoded.exp > (Date.now() - (Date.now() % 1000)) / 1000)
  );
  console.log(jwtDecoded);

  if (jwtDecoded.exp > (Date.now() - (Date.now() % 1000)) / 1000) {
    return (
      <div style={{ zIndex: "1", position: "fixed", display: "flex" }}>
        <ul className="navinator">
          <li className="navElement">
            <a className="anchor" href="/home">
              Home
            </a>
          </li>
          <li className="navElement">
            <a className="anchor" href="/profile">
              Profile
            </a>
          </li>
          <li className="active">
            <a
              className="anchor"
              // href="#"
              onClick={e => updateModal(true)}
            >
              + New Post
            </a>
          </li>
          <li style={{ float: "right" }}>
            <div
              id="profile"
              onMouseOver={e => setHideDropdown(false)}
              onMouseLeave={e => setHideDropdown(true)}
            >
              <div style={{ float: "left", paddingRight: "10px" }}>
                <img
                  src={user.profileImage}
                  alt="error"
                  className="profile-image"
                />
                {/* need profileImage field for user */}
              </div>
              <div style={{ float: "left", paddingRight: "5px" }}>
                {jwtDecoded.sub}
              </div>
              <div style={{ float: "left" }} className="arrow-down"></div>
            </div>
          </li>
        </ul>
        <NewPostModal show={modalOpen} updateModal={updateModal} />
        <div style={{float:"right"}}><Dropdown visible={hideDropdown} setHideDropdown={setHideDropdown}/></div>
      </div>
    );
  } else {
    console.log("redirecting");
    return <Redirect to={{ pathname: "/login", state: { from: "/home" } }} />;
  }
} //class

export default Navbar;

Dropdown.js

import React from "react";
import "../CSS/navbar.css";

export default function Dropdown(props) {
  return (
    <div
      hidden={props.visible}
      className="dropdown"
      onMouseOver={e => props.setHideDropdown(false)}
      onMouseLeave={e => props.setHideDropdown(true)}
    >
      <li>
        <a className="anchor" style={{ textAlign: "left" }} href="/profile">
          Profile
        </a>
      </li>
    </div>
  );
}

Navbar.css

.navinator {
  z-index: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(218, 10, 10);
  position: fixed;
  top: 0;
  width: 100%;
  height: 52px;
}
.navElement {
  float: left;
}
.anchor{
  display: block;
  color: white !important;
  text-align: center;
  padding: 14px 16px; 
  text-decoration: none !important;
  cursor: pointer;
}
.anchor:hover {
  background-color: rgb(255, 23, 15) !important;
}
.active {
  background-color: rgb(28, 13, 110) !important;
  float: right;
  width: 120px;
}
.active .anchor{
  align-items: center;
  justify-content: center;
}
.active .anchor:hover {
  background-color: rgb(32, 11, 156) !important;
}
.profile-image {
  width: 30px;
  height: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
#profile {
  color: white !important;
  text-align: center;
  padding: 14px 16px; 
  text-decoration: none !important;
  /* height: 52px; */
  overflow: auto;
}
#profile:hover {
  background-color: rgb(255, 23, 15) !important;
  cursor: pointer;
}
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  margin-top: 10px;
}
.dropdown{
  top: 52px;
  width: 222px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  display: inline-block;
  background-color: rgb(218, 10, 10);
}
.dropdown li{
  list-style-type: none;
}

I am pretty new to web development and am having a lot of fun. However, this bit is rather frustrating as I feel like it should be a pretty simple solution. Any help would be appreciated!