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.
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.
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.
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.
You can see an example if you go to https://johnblair.azurewebsites.net/ 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.