设置具有绝对位置的屏幕宽度的子宽度最大值

Question

I have 3 drop down menus with dynamic width and position like these

I want to make each drop down width to maximum of Screen width starting from the current position leaving 10px from right side like this.

The drop down list is positioned absolute to its parent container. I want to make a single css class and apply the each drop down list so it can act like the above one which can have maximum of screen width subtracting 10px from it.

By searching SO, I found many questions but could not get it work in my problem. I don't want to do anything with Javascript but with pure CSS only.

Many of SO Questions suggest using vw unit of css but I don't understand how to use vw in this problem. Any help from you experts will be really appreciated. Thanks.

Some suggest this but does not work

width:100vw;
margin-left:100%;
transform: translate(-50vw);

Because above could is good if I want to make drop down in center of screen but here the situation is starting from parent position. I have tried replacing it with margin-right and tried as much I could but no use.

Answer 1

i don't think this can be made with a single class, you should be using a single class for each menu item.

You can first set a fixed width to top menu item, something like 100px. So each item next will be 100px further from the left side of the page.

Now you have to make a calculation of 100% of the viewport with 100vw , and then subtract the pixels from the previous items, if the item menu has 2 items before then it will be 200 pixels.

This substraction can be made with calc like this: width: calc(100vw - 200px);

The result with this technique would be something like this:

`

Here is an example: https://jsfiddle.net/52jab0t9/

I hope this help you, excuse me by my bad english :)

PD: I took the code for the menu from here: http://www.cssscript.com/demo/simple-clean-pure-css3-dropdown-menu/