CSS - Fly Out Menu Cut Off
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 fly out menu wouldn't work and was cut off by the surrounding css div (see image below).
The error is potentially caused by the following.
- The div or surrounding container - Because it's cutting the menu off.
- The css, z-index or overflow (a css issue is the more likely cause).
How do I Find Where the Error is?
You can either find it by trial and error:
- By searching through your css code (or HTML) and changing it to see if it solves the issue.
- Or by using a web developer tool available in most browsers by pressing F12 (or selecting it in the browser settings), and using the web developer tool to narrow down the cause.
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 fly out 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:
- Select the 'Inspect Element' tool.
- Select the element on the page that is having the issue.
- The tool will suggest the HTML code to view and review for errors / familiarisation.
- The tool will suggest the css code to view and review for errors / familiarisation.
In my case, the error causing the problem was the css statement 'overflow: hidden;' which I then changed to 'overflow: visible;'.