Is there a CSS-only way of making dropdown menu items the same size as their parent?

I've been tampering around in W3 Schools and so far I've gotten the desired effect, but the navbar now expands with the dropdown menu. Is there a better way of doing this that I'm missing? Apologies in advance for formatting, and thank you for your time.

EDIT: To hopefully clarify a bit further: Example

Link to the W3schools thing: https://www.w3schools.com/code/tryit.asp?filename=GD1ZCKC1TKED

The code:

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

body {
      font-family: Arial, Helvetica, sans-serif;
    }

.mainNav {
    background-color: #000;
    padding:12px 10px 0px 0px;
    float: right;
    overflow: hidden;
}

.mainNav a {
    color: #FFF;
    float: left;
    display: block;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.mainNav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;

}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.mainNav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;

}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 500px) {
    .logo {
        max-width: 25%;
        height: auto;
        padding-top:10px;
        margin-bottom:-50px;
        display: block;
        margin: auto;
    }
    .mainNav{
        background-color: black;
        width:100%;
        font-size: 18px;
    }
    .mainNav a:not(:first-child), .dropdown .dropbtn {
        display: none;
    }
    .mainNav a.icon {
        float: right;
        display: block;
    }
    .mainNav.responsive {
        position: relative;
    }
    .mainNav.responsive .icon {
        position: absolute;
        right: 0;
        top: 15px;
    }
    .mainNav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
    .mainNav.responsive .dropdown {
        float: none;
        }
    .mainNav.responsive .dropdown-content {
        position: relative;
        }
    .mainNav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: center;
    }
}
</style>
</head>
<body>

<div class="mainNav" id="navID">

            <a href="#home" class="active">Temp1</a>

            <div class="dropdown">
                <button class="dropbtn">Temp2 <i class="fa fa-caret-down"></i></button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div> 

            <div class="dropdown">
                <button class="dropbtn">Temp3<i class="fa fa-caret-down"></i></button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div> 

            <div class="dropdown">
                <button class="dropbtn">Temp4 <i class="fa fa-caret-down"></i></button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div> 

            <a href="#sources">Temp5</a>

            <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
        </div>

        <script>
        function myFunction() {
            var x = document.getElementById("navID");
            if (x.className === "mainNav") {
                x.className += " responsive";
            } else {
                x.className = "mainNav";
          }
        }
        </script>
</body>
</html>

Solution

The reason your entire nav is expanding is due to the positioning of the item. You have the .dropdown-content set to position: relative; By changing this to position: absolute; it will fix the first issue.

However, now to get the width the same as the parent, there are a few ways to do this. The easiest would be to simply set a width property to the dropdown-content as well, so it is always the same. The only issue will be if you have longer dropdown content areas so that the words are cut off. If this is the case, you can use min-width instead. I have calculated the width to be 97.45px; from the padding used on the <button> tag.

So all you will need to do is change your css of .dropdown-content to :

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width: 97.45px;
}

or, like I said min-width: 97.45px; . This will keep it the same width as the parent while allowing options to expand with larger content.

If this isn't what you're looking for, please comment reply to this and I'd be happy to help. There's a few different ways to accomplish this. Purely setting a width might just be the most simple. Btw, welcome to Stack Overflow