Expand li element to fit content

Question

I am trying to get the parent li (menu item) to widen (horizontally) on hover to fit all of the ul li items (submenu items) without hardcoding a width so no text is floating or cut off.

I am making a menu using an unordered list. Each submenu item is within the li tags of the main menu. My menu is horizontal and shows the submenu items when you hover over the elements.

I have tried various ways to try and get the li element to expand to the size of the submenu items or stay the same size if they are smaller. My clunky but working way was to hardcode a width of 22% on hover. I was wondering if there was a way to do this and to nicely fit the text rather than have a lot of white space. Hardcoding the width also causes menu items without submenu items to expand (I could work around this but I don't want to hardcode it to begin with).

I need to do this entirely in vanilla html, css, and javascript. It would also be nice if the solution were cross-browser compatible.

I apologize if my code is non-conventional, I have been trying to teach myself css. Thank you in advance.

The following is an example of my HTML/CSS (minus the links):

body {
  margin: 0;
}
*{
  font-family: Gotham Book, Arial, Helvetica, Sans-serif;
}
#navbar {
  background-color: #f1f1f1;
  text-align: center;
}
#navbaritems {
  margin: 0 auto;
}
#navbaritems ul {
  padding: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  display: inline;
  position: relative;
  font-size: 0;
}
#navbaritems ul li {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  color: #000;
  position: relative;
}
#navbaritems ul li ul {
  width: 100%;
  padding: 0;
  position: absolute;
  top: 6vh;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#navbaritems ul li ul li {
  background-color: #f1f1f1;
  display: block;
}
#navbaritems ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
#navbaritems ul li:hover {
  -o-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  width: 22%;
}
#navbaritems ul li ul li:hover {
  -o-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  width: 100%;
}
#navbaritems ul li a {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-size: 1vw;
  display: block;
  height: 4vh;
  line-height: 4vh;
  color: #808080;
  text-decoration: none;
  padding: 1vh;
  margin: 0;
}
#navbaritems ul li a:hover:not(.active) {
  background-color: #82c986;
  color: #ffffff;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  cursor: pointer;
  display: block;
}
#navbaritems ul li a.active {
  color: #ffffff;
  background-color: #4CAF50;
}

<div id="navbar" class="addBottomShadow">
  <div id="navbaritems">
    <ul>
      <li><a class="active">Home</a>
      </li>
      <li><a>Patient Eligibility</a>
        <ul>
          <li><a>Eligibility Tracker</a>
          </li>
        </ul>
      </li>
      <li><a>Claim Status</a>
      </li>
      <li><a>Remittance Advice</a>
      </li>
      <li><a>E-Claims Batch Status</a>
      </li>
      <li><a>Fees</a>
        <ul>
          <li><a>Update Fees</a>
          </li>
          <li><a>Reimbursement Report</a>
          </li>
          <li><a>Reimbursement Detail Report</a>
          </li>
          <li><a>Submit Fees</a>
          </li>
        </ul>
      </li>
      <li><a>Inquiries</a>
        <ul>
          <li><a>Customer Service Inquiries</a>
          </li>
          <li><a>COB Change Requests</a>
          </li>
          <li><a>Submit Inquiry</a>
          </li>
        </ul>
      </li>
      <li><a>Settings</a>
        <ul>
          <li><a>Procedure Sets</a>
          </li>
          <li><a>Eligibility Tracker</a>
          </li>
          <li><a>Claim Settings</a>
          </li>
          <li><a>Remittance Advice</a>
          </li>
          <li></li>
        </ul>
      </li>
      <li><a>Other</a>
        <ul>
          <li><a>Provider Seminars</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

</div>

Answer 1

The big problem here is that the parent li element only knows to be as big as the main a until hover because the child ul has display:none; which means the width is effectively 0. Instead of using display:none; you could try forcing the height to be 0 and leaving the initial width. Then on hover, do height:inherit; to display the menu items. Remember to use overflow:hidden; so things don't go outside of the element when the height isn't big enough for them.

EDIT: Needed to do some more work, but I think this is what you are looking for.