Error - CSS Fly Out Menu Cut Off

www.do-it-up.com

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).

Image flyout menu error

The Solution

The error is potentially caused by the following.

How do I Find Where the Error is?

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 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:

  1. Select the 'Inspect Element' tool.
  2. Select the element on the page that is having the issue.
  3. The tool will suggest the HTML code to view and review for errors / familiarisation.
  4. The tool will suggest the css code to view and review for errors / familiarisation.
Image flyout menu error - Firebug use example

In my case, the error causing the problem was the css statement 'overflow: hidden;' which I then changed to 'overflow: visible;'.