The three menus below demo how a menu will or won't "fail gracefully." I've simplified the menu into one option (the "About" page) with 2 sub-options ("History" and "Team" pages).
The first and second menu demo a menu that is built correctly. The third menu shows what happens to an improperly coded menu when JavaScript fails for some reason.
Note: for the purposes of this demo you do not have to disable JavaScript in your browser. I've just made sure that the menu script does not work on the 2nd and 3rd menus.
This menu demos the optimal situation. The drop down works, and all the pages can be reached from the "drop down" options. If you click on "About" you will reach the "About" page. If you just place your mouse of "About" you will see the other sub-options.
With this menu you can reach all pages ("About", "History" and "Team") from this menu.
This menu demos what happens when JavaScript does not work for a menu that is properly built.
This menu is just the same as the one to the left, but the JavaScript does not work for it for some reason. This one "failed gracefully."
Notice how you can still reach the "About" page even though the drop down menu doesn't appear. You may not be able to reach the "History" or "Teams" pages from this menu but they still can be reached from the "About" page.
Note that on the "About" page you still need the sub-menu options to reach the rest of the "About" categories. The "History" and "Team" pages are linked from the "About" page. This method is search engine friendly (and user friendly) because of this.
This menu demo's how many menus are done. Notice how the "About" link does not work anymore. The JavaScript dropdown menu doesn not work, and the "About" link is done improperly; you can't even get to the "About" page anymore.
Since you can't reach the "About" page, you also cannot reach the "History" or "Team" pages. You (and search engines) are stuck on this page.
Usually this problem is because of poor JavaScripting practices. The most
common problem is that the anchor tag (the tag that should be used to direct
you to the About page) is used to make the JavaScript work (e.g. <a
href="#" onmouseover="menuScript">About Us</a>).
Note that the href attribute is set to #, which
is essentially a broken link that goes nowhere. Unfortunately just adding
in the proper address (href="about.html) will
not fix this problem since the browser will first try the onmouseover command,
and when that fails, the address will be ignored.
Unfortunately, fixing this kind of problem is not a straight forward one. JavaScripting knowledge is needed along with a lot of testing to make sure everything works. It may be that a more simple menu is needed, or maybe a "text only" menu somewhere (most often at the bottom of the page) could be incorporated.
If you want to know how to fix the problem using proper scripting please look into the following resources:
Note: The JavaScript and CSS used in the menu were modified from the code for the "Drop-Down Menus, Horizontal Style" article by Nick Rigby. I had to modify it a bit to make it work for this demo. If you plan to try this for yourself, I'd suggest looking at his code for a much cleaner version.