Home arrow HTML arrow Page 3 - A Vertical Menu for All Browsers

A Vertical Menu for All Browsers

This is the eighth part of a nine-part series that shows you how to build a menu that will work in all browsers. Let us quickly look at the design of a vertical main menu in this part.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
June 24, 2009
  1. · A Vertical Menu for All Browsers
  2. · Layout with Vertical Main Menu
  3. · Third, Fourth and Fifth Drop Down Menus
  4. · The Second Drop Down Menu

print this article

A Vertical Menu for All Browsers - Third, Fourth and Fifth Drop Down Menus
(Page 3 of 4 )

The diagram of these sub menus is as follows:

Fig. 17.4 Third Drop Down Menu

Fig.17.5 Fourth Drop Down Menu

Fig.17.6 Fifth Drop Down Menu

As you can see, each drop down menu table is inside another table. The nesting table has one or more cells above the nested table. We have seen this technique before. The nesting and nested tables are of the same width. To compensate for the border of the nested table, the cells of the nesting table, above the nested table, have the property “padding:1px” in their style attribute.

As you can see, the lower down the nested table is in its nesting table, the lower down the menu appears on the screen. Following our design, all the cells, independent of the table they are in, are of the same height. This is partly because the same font characteristics are used throughout. There is alignment between the sub menu top edge and the top edge of the corresponding main menu item.

All of the blank cells above have the   character. This prevents the cells from collapsing.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials