CSS two level horizontal menu

[PeDa]

I am trying to adapt a menu found on internet to this page. My problem is that the second level menu occupies the whole screen width, and not just the constrained width of the first level. Playing with the css properties of the subnav-content class (see below) has not yeilded me anything useable. Relevant code is:

.navbar {
  overflow: hidden;
  background-color: #333; 
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

.subnav .subnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: red;
}

.subnav-content {
  display: none;
  position:absolute;
  left:0;
  width:100%;
  background-color: red;
  z-index: 1;
}

.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}

.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

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

<div class="navbar">
  <a href="#home">Home</a>
  <div class="subnav">
    <button class="subnavbtn">Royal Navy <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#Personnel">Personnel</a>
      <a href="#Vessels">Vessels</a>
      <a href="#Campaigns">Campaigns</a>
      <a href="#Fleets">Fleets</a>
      <a href="#Losses">Losses</a>
      <a href="#Miscellaneous">Miscellaneous</a>
    </div>
  </div> 
  <a href="#Surgeon">Naval surgeon</a>
  <div class="subnav">
    <button class="subnavbtn">Slave trade <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#Legislation">Legislation</a>
      <a href="#West">West African slave trade</a>
      <a href="#Niger">1841 Niger expedition</a>
      <a href="#East">East African slave trade</a>
    </div>
  </div>
  <a href="#Varia">Varia</a>
  <div class="subnav">
    <button class="subnavbtn">Wm. Loney R.N.<i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="Loney.htm">Loney home</a>
      <a href="Life.htm">Life & career</a>
      <a href="Documents.htm">Documents</a>
      <a href="Album.htm">Album</a>
      <a href="Ships.htm">Ships</a>
      <a href="Portrait.htm">Portrait</a>
      <a href="Uniform.htm">Uniform</a>
    </div>
  </div>
  <a href="FunAndGames.htm">Fun</a>
  <a href="Search.htm" class="w3-right">Search this site</a>
</div>