Q:

resize dropdown menu to match link width

I would like to resize my dropdown menu to match the link width. Here is a picture of what I currently have:

Here are the relevant parts of my HTML page:
    <body>
        <div class="navbar">
            <nav>
                <a href=index.html>About</a>
                <a href=projects.html>Projects</a>
                <a href=publications.html>Publications</a>
                <div class="dropdown">
                    <button class="dropbtn">Writing
                    </button>
                    <div class="dropdown-content">
                      <a href="why_writing.html">Why Write?</a>
                      <a href="dollops.html">Dollops</a>
                      <a href="longforms.html">Longforms</a>
                      <a href="technical_science.html">Technical/Science</a>
                      <a href="quotes.html">Quotes</a>
                      <a href="words.html">Words</a>
                      <a href="notes.html">Notes</a>
                    </div>
                </div>  
            </nav>
        </div>

Here are the most relevant parts of my CSS stylesheet:
/* Navbar container */
*{
    box-sizing: border-box;
  }
   .navbar {
      overflow: hidden;
      background-color: #272424;
      font-family: Arial;
    }

    /* Links inside the navbar */
    .navbar a {
      float: left;
      font: Arial;
      font-size: 20px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      width: 25%;
    }

    /* The dropdown container */
    .dropdown {
      float: left;
      overflow: hidden;
      width: 25%;
    }

    /* Dropdown button */
    .dropdown .dropbtn {
      font-size: 20px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit; /* Important for vertical align on mobile phones */
      margin: 0; /* Important for vertical align on mobile phones */
      width: 100%;
    }

    /* Add a red background color to navbar links on hover */
    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: #81A3A7;
    }

    /* Dropdown content (hidden by default) */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    /* Links inside the dropdown */
    .navbar .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      width:auto;
    }

    /* Add a grey background color to dropdown links on hover */
    .dropdown-content a:hover {
      background-color: #ddd;
    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }

I tried adding width: 100% to .dropdown-content but the width was too large and extended beyond the writing link to the right. 
EDIT: As an extra feature, I would like my links to be appear as "boxes" that are connected without any spaces between them instead of having them appear as on one continuous band of black. How can I do that?

A:

I have make some modification related to the css.

/* Navbar container */
*{
    box-sizing: border-box;
  }
   .navbar {
      background-color: #272424;
      font-family: Arial;
     height:50px
    }

    /* Links inside the navbar */
    .navbar a {
      float: left;
      font: Arial;
      font-size: 20px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      width: 25%;
    }

    /* The dropdown container */
    .dropdown {
      float: left;
      width: 25%;
       position: relative;
    }

    /* Dropdown button */
    .dropdown .dropbtn {
      font-size: 20px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit; /* Important for vertical align on mobile phones */
      margin: 0; /* Important for vertical align on mobile phones */
      width: 100%;
    }

    /* Add a red background color to navbar links on hover */
    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: #81A3A7;
    }

    /* Dropdown content (hidden by default) */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
          width: 100%;
    }

    /* Links inside the dropdown */
    .navbar .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      width:auto;
    }

    /* Add a grey background color to dropdown links on hover */
    .dropdown-content a:hover {
      background-color: #ddd;
    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }
<div class="navbar">
            <nav>
                <a href=index.html>About</a>
                <a href=projects.html>Projects</a>
                <a href=publications.html>Publications</a>
                <div class="dropdown">
                    <button class="dropbtn">Writing
                    </button>
                    <div class="dropdown-content">
                      <a href="why_writing.html">Why Write?</a>
                      <a href="dollops.html">Dollops</a>
                      <a href="longforms.html">Longforms</a>
                      <a href="technical_science.html">Technical/Science</a>
                      <a href="quotes.html">Quotes</a>
                      <a href="words.html">Words</a>
                      <a href="notes.html">Notes</a>
                    </div>
                </div>  
            </nav>
        </div>

