为什么我的弹出窗口会移动我的页面？ 当我点击它时，它使我的页面变宽到我想要的

Question

So i have a user id popover on my page, when I click it, it shofts the page to make it wider, instead of moving itself within the boundariesof the page.

this is what it does

Notice that little white space, I dont want it to be there. When it is not clicked, it is normal

How do i format this properly?

Here is the popover component

import * as React from "react";
import Popover from "@mui/material/Popover";
import Typography from "@mui/material/Typography";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import { IconButton } from "@mui/material";
import navStyles from "../styles/Nav.module.css";
export default function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div>
      <IconButton
        aria-describedby={id}
        variant="contained"
        onClick={handleClick}
      >
        <AccountCircleIcon className={navStyles.pfp} />
      </IconButton>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
      >
        <Typography sx={{ p: 0, m: 0 }}>
          <ul>
            <li>Login/Logout</li>
            <li>Account</li>
            <li>Your Trips</li>
            <li>Help</li>
            <li>Settings</li>
          </ul>
        </Typography>
      </Popover>
    </div>
  );
}

Here is my nav component

import Link from "next/link";
import navStyles from "../styles/Nav.module.css";
import AccountMenu from "../components/AccountMenu.js";
import { useAuth } from "./contexts/userContext";
import { useRouter } from "next/router";

const Nav = () => {
  const { logout, user } = useAuth();
  const router = useRouter();

  async function handleLogout() {
    try {
      await logout();
      console.log("logged out");
      router.push("/");
    } catch (err) {
      alert(err);
    }
  }

  return (
    <nav className={navStyles.nav}>
      <ul>
        <li>
          <Link href="/">
            <img
              className={navStyles.logo}
              src="/blue.png"
              style={{ cursor: "pointer" }}
            />
          </Link>
        </li>
        <li>
          <Link href="/Properties">Properties</Link>
        </li>
      </ul>
      <ul style={{ margin: "0px", padding: "0px" }}>
        {!user ? (
          <li style={{ margin: "0px", padding: "0px" }}>
            <Link href="/Authentication/Login">Login </Link>
          </li>
        ) : (
          <div>
            <div style={{ color: "green" }}>Welcome {user?.email} </div>
            <li>
              <Link href="/Account">Account</Link>
            </li>
            <div
              onClick={handleLogout}
              style={{ color: "black", cursor: "pointer" }}
            >
              Logout
            </div>
          </div>
        )}
        <li style={{ margin: "0px" }}>
          <AccountMenu className={navStyles.pfp} />
        </li>
      </ul>
    </nav>
  );
};
export default Nav;

Answer 1

https://codepen.io/ivan-irvine-97/pen/jOpMVOy

Hope I help!

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.username_left')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }

 .dropdown button { background: url('https://www.nicepng.com/png/detail/202-2024580_png-file-profile-icon-vector-png.png') no-repeat; cursor: pointer; width: 100px; height: 100px; background-size: contain; border: none; }.dropdown { position: absolute; right: 0%; } /* Dropdown Button */.username_left { color: black; /* padding: 16px; */ font-size: 16px; border: none; border-radius: 10px; background: none; cursor: pointer; } /* Dropdown button on hover & focus */.username_left:hover, .dropbtn:focus { background-color: none; color: #ffcfcf; } /* The container <div> - needed to position the dropdown content */.dropdown { /* position: relative; */ display: inline-block; float: left; } /* Dropdown Content (Hidden by Default) */.dropdown-content { display: none; position: absolute; min-width: 160px; background: #fffffff2; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; right: 0%; min-height: auto; } /* Links inside the dropdown */.dropdown-content a { color: black; padding: 16px; text-decoration: none; display: block; font-size: 14px; font-family: 'Roboto'; } /* Change color of dropdown links on hover */.dropdown-content a:hover { color: indianred; } /* Show the dropdown menu (use JS to add this class to the.dropdown-content container when the user clicks on the dropdown button) */.show {display:block;}.container { float: right; margin-right: 20px; } * { margin: 0; }

 <,DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width. initial-scale=1.0"> </head> <body> <div class="container"> <div class="dropdown"> <button onclick="myFunction()" class="username_left"> </button> <div id="myDropdown" class="dropdown-content"> <a href="'. $v_user . '">My Profile</a> <a href="#">Switch Account</a> <a href="logout">Sign out</a> </div></div></div> </body> </html>