how do we make a associated menu icon with dropdown values with mui menu options – CSS

i would like to design a component like this

im using a material ui pop menu in my project

here is the jsx code

<div className="navMenu" style={{ position: "relative" }}>
        <Tooltip title="Menu">
          <div
            className="navMenuIconContainer"
            style={{
              boxShadow:
                anchorMenu === null
                  ? ""
                  : "rgba(60, 64, 67, 0.2) 0px .1rem .2rem 0px, rgba(60, 64, 67, 0.05) 0px .1rem .3rem .1rem",
              color: anchorMenu === null ? "black" : "#e57373",
              zIndex: "2",
            }}
            onClick={toggleMenu}
          >
            <BiMenu style={{ cursor: "pointer" }} size={"2.5rem"} />
          </div>
        </Tooltip>
        <Menu
          id="menu-appbar"
          anchorEl={anchorMenu}
          open={Boolean(anchorMenu)}
          onClose={closeMenu}
          PaperProps={{
            style: {
              borderRadius: ".1rem",
              boxShadow:
                "rgba(60, 64, 67, 0.2) 0px .1rem .2rem 0px, rgba(60, 64, 67, 0.05) 0px .1rem .3rem .1rem",
              zIndex: "1",
              transform: "translateX(-.5rem)",
            },
          }}
        >
          <MenuItem sx={{ fontSize: "1.1rem" }} onClick={closeMenu}>
            Contact us
          </MenuItem>
          {location[2] === "analysis" ? (
            <MenuItem sx={{ fontSize: "1.1rem" }} onClick={generateQuery}>
              Query
            </MenuItem>
          ) : (
            <MenuItem sx={{ fontSize: "1.1rem" }} onClick={dashboard}>
              Dashboard
            </MenuItem>
          )}

          <MenuItem sx={{ fontSize: "1.1rem" }} onClick={handleSignOut}>
            Sign out
          </MenuItem>
        </Menu>
      </div>

here are the imports

import { Tooltip, Menu, MenuItem } from "@mui/material";

and this is what i achieved with the above code

i dont want to deferenciate that 2 elements with box shadow
i was trying to make that component look single but i failed to do that
reason is im unable to make the burger icon above the options paper with proper z-index
but i could’t

here is the css for container div’s

.navMenu{

  }
  .navMenuIconContainer{
    position: relative;
    width : 3rem;
    height : 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
  }

please anyone give proper answer please

here is the sandcodebox link what i tried

https://codesandbox.io/s/headless-morning-m9uf6o?file=/src/styles.css