Prevent vertical clip when using overflow-y

I have a two level horizontal navigation menu; the 2nd level displays vertically. The amount of items on the 2nd-level varies. Sometimes, there are enou开发者_如何学Cgh items that the list extends beyond the browser view. I decided to use overflow-y:auto and max-height:<arbitrary height>px to prevent that problem. But now I have another problem of scrollbar clipping some vertical real estate of the overflowed list to make room for the scrollbar itself, which forces horizontal scroll bar to appear to able to display the clipped area.

What can I do to prevent the scrollbar clipping part of the list's width? Thank you.

Live Example

p.s. if you have a better title for the question, let me know. I was having a tough time with it.

I had a quick look at it and noticed that your "a" tags have both padding:5px and width:100%; this cause them to be rendered as (100% + 10px) where 10px will always be behind the scroll.

So in order to have the container to correctly have 100% width, try to give "a" tags padding:5px 0; and give padding:5px; to the vertical drop menu.

Hope it make sence.

Here are changes I made: http://jsfiddle.net/XxasC/10/ You need to fix some issues caused by added padding.

Conclusion: Never give both "width:100%" and "padding-left/right" to an element because it will be rendered wider than 100% ! (Padding is always added to the width - even 100%)