title: Expand li element to fit content
body: <p>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.</p>
  
  <p>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.  </p>
  
  <p>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).</p>
  
  <p>I need to do this entirely in vanilla html, css, and javascript.  It would also be nice if the solution were cross-browser compatible.</p>
  
  <p>I apologize if my code is non-conventional, I have been trying to teach myself css.  Thank you in advance.</p>
  
  <p>The following is an example of my HTML/CSS (minus the links):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="navbar" class="addBottomShadow"&gt;
    &lt;div id="navbaritems"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a class="active"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;Patient Eligibility&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a&gt;Eligibility Tracker&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;Claim Status&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;Remittance Advice&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;E-Claims Batch Status&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;Fees&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a&gt;Update Fees&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Reimbursement Report&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Reimbursement Detail Report&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Submit Fees&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;Inquiries&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a&gt;Customer Service Inquiries&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a&gt;COB Change Requests&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Submit Inquiry&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;Settings&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a&gt;Procedure Sets&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Eligibility Tracker&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Claim Settings&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Remittance Advice&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;Other&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a&gt;Provider Seminars&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>