如何用CSS实现下拉菜单按钮下方区域颜色统一的设计效果

我正在制作一个下拉菜单，希望按钮下方显示的区域与按钮颜色保持一致。当前功能可正常运行，主要是为了优化设计层面的表现。预期效果如下：

当前代码如下：

<head>
    <title>Project</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin&display=swap');
      html,body{
          padding: 0;
          margin: 0;
          background: #121212;
          height: 100%;
      }
      .main{
          height: 100%;
          width: 60%;
          margin:auto;
          background: #121212;
      }
      a,p,h1{
          font-family: 'Libre Franklin', sans-serif;
          color: white;
      }
      header{
          background: #181818;
          width: 100%;
          height: 75px;  
      }
      .headerMain{
          width: 60%;
          height: 100%;
          margin: auto;
          font-size: 40px;
          background-image: url(assets/Logo.png);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: right;
      }
      .headerMain a {
        color: white;
        text-decoration: none;
        font-size: 35px;
        display: block;
      }

      .headerMain a.icon {
          background: #121212;
          width: 60px;
          height: 55px;
          text-align: center;
          vertical-align: middle;
          padding-top: 20px;
          }

      .headerMain a:hover,i:hover{
        background-color: #282828;

      }

      nav{
          display:none;
          height: 50px;
          margin: 0;    
      }

      nav ul{
          background-color: #181818;
          list-style:none;
          margin:0;
          padding:10px;
          text-align:center;
      }
      nav li{
          display:inline;
      }
      nav a{
          font-weight: 900;
          padding: 10px;
          margin: 0 5px;
      }
      nav a:hover{
          background-color: white;
          color: black
      }
    </style>
</head>
<body>
    <header>
        <div class="headerMain">
            <a class="icon" onclick="dropDownFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
    </header>
    <nav id="dropDown" >
        <ul>
            <li><a>Home</a></li>
            <li><a>Shop</a></li>
            <li><a>Gallery</a></li>
            <li><a>Contact</a></li>
        </ul>

    </nav>
    <div class="main">
        <h1>Hello World</h1>
    </div>
    <script>
      function dropDownFunction() {
          var x = document.getElementById("dropDown");
          if (x.style.display === "block") {
            x.style.display = "none";
          } else {
            x.style.display = "block";
          }
        }
    </script>
</body>

从预期效果来看，需要让下拉菜单左侧区域和汉堡按钮的背景色#121212一致，右侧保持#181818。通过以下CSS修改即可实现：

1. 给nav设置和.headerMain一致的宽度（60%）并居中，同时设置背景色为#121212
2. 修改nav ul的宽度为calc(100% - 60px)，并让它向右对齐，这样左侧会留出和按钮宽度一致的60px区域，保持和按钮同色

修改后的CSS片段：

nav{
    display:none;
    height: 50px;
    margin: 0 auto;
    width: 60%;
    background-color: #121212;
}

nav ul{
    background-color: #181818;
    list-style:none;
    margin: 0 0 0 auto;
    padding:10px;
    text-align:center;
    width: calc(100% - 60px);
    height: 100%;
    box-sizing: border-box;
}

如果想要视觉衔接更自然，可以把nav的height调整为35px，同时将nav ul的padding改为5px 10px，让整体高度和按钮的视觉高度匹配。

内容的提问来源于stack exchange，提问作者Wild Alex