title: How to adjust nav menu based nav item name character length?
body: <p>My problem: if the name of a main nav item in my dropdown menu increases in character length, my dropdown menu breaks (see attached imageTwo). <img src="https://i.stack.imgur.com/Nwhdm.png" alt="messed up layout when characters are increased in nav item name"></p>
  
  <p>I’m using relative units of measure (ems mostly) in hopes that would give some responsiveness to my design and adjust the layout in case of an increase in character length of the main nav items but it didn’t work.</p>
  
  <p>My main menu is relatively positioned and the sub-menus are absolutely positioned. These sub-menus, rather than dropdown vertically as is standard, instead expand horizontally in parallel to the main menu above it (see attached imageOne). <img src="https://i.stack.imgur.com/xlVLr.png" alt="how the menu should look"></p>
  
  <p>My goal now is to figure out how to correct code so that, in case of an increase or decrease in number of characters for the nav items in the main menu a) my main nav menu can readjust it’s width appropriately and b) my sub-menu will readjust it’s positioning to appear directly beneath the main menu above it.  </p>
  
  <p>My thought is, I will need to use some jQuery to do this but I wondered if it was possible using only CSS.</p>
  
  <p>I’ve posted my CSS below; please let me know if more information is needed.</p>
  
  <pre><code>#navigation {
    background: rgb(102,102,102); 
    max-height: 3.34em;
    padding: 0;
    position: relative;
    max-width: 48.5em;
    border-radius: 0;
  }
  
  #navigation .child-menu, #navigation .child-menu2 {
    display: none;
  }
  
  #navigation li.hover #admin-submenu  {
    left: -405px;
  }
  
  #navigation li.hover .child-menu {
    background: #47766c;
    display: block;
    position: absolute;
    width: 80em;          
    z-index: 250;
    top: 39px;
    left: -334px;
  }
  
  #navigation ul li ul li:hover .child-menu2 {
    background: #47766C;
    display: block;
    left: 0;
    position: absolute;
    top: 40px;
    width: 110px;
    z-index: 250;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/VuJiN.png" alt="enter image description here"></p>