title: CSS Make an absolutely positioned dropdown menu fill the remaining horizontal viewport width
body: <p>Using Bootstrap 3 the drop down works fine in that the drop down is positioned directly below the menu item it is the drop down of - due to the CSS position:absolute and top:100% and left: 0.</p>
  
  <p>What I would like is to be able to set the width of the dropdown to fill up the remaining horizontal space of the viewport.</p>
  
  <p>You cannot just set it to width:100% because the positioning container is the main menu item whose width is just the width of the menu item. I cannot use calc(100% - currentleft) because i don't know the current left. I could do it in script but was hoping to just use a pure CSS solution.</p>
  
  <p>I didn't want to use position: fixed, left:0 , width:100% as I want the left to begin where it currently is i.e. below the menu item it is a dropdown of.</p>
  
  <p>You can see an example if you go to <a href="https://johnblair.azurewebsites.net/" rel="nofollow noreferrer">https://johnblair.azurewebsites.net/</a>  and hover over "Sample Pages". I want the drop down to extend from its current left position to the right edge of the viewport - and accommodate any resizing of the browser.</p>