The image below shows a responsive web page where the menu changes from a horizontal menu to a vertical menu depending on the screen size. The horizontal menu worked fine, but the CSS vertical flyout menu wouldn’t work and was cut off by the surrounding CSS div (see image below).
The error is potentially caused by the following.
You can either find it by trial and error:
Web development tools can be found in the following browsers, Google Chrome, Internet Explorer, Safari, Firefox and Opera. The diagram below gives a brief description of how to narrow down the cause (of ‘CSS vertical flyout menu cut off’) using the tool. In this illustration, I am using ‘Firefox‘ and ‘Firebug‘ (the links take you to their ‘overview’ pages in Wikipedia, where you can also find their website links).
From the diagram below:
In my case, the error causing the problem was the CSS statement ‘overflow: hidden;’ which I then changed to ‘overflow: visible;’.