<empty> <empty> <empty>
 
Customized Dropdowns  
Run-of-the-mill dropdowns are limited to a single column with the addition of single-column sublevels whenever supplementary classifications appear under a button.  
That's a great system, but maybe it doesn't quite meet your needs. Take a look at this system for something different and versatile. It uses tables within a div tag to create navigation so the flexibility that comes with tables is available. (All links in this sample return to this page.)  
Pros  
Navigation extends the entire width of the designated image area so that multiple columns can be used.  
The option is available of using different navigation styles under each main button (click on each button to see this in action).  
Text can be used in place of buttons if you want to describe the content of a link in detail (see Nature Hikes and Become a Member).  
All text within the text blocks can be read by browsers and text links can be used in the text, thus enhancing SEO.
Ability to span cells to group related subjects under a single, common heading (see Wildlife).
Takes up less room on the page than traditional dropdowns while still displaying more information.
Pseudo-class selectors can be set up for each kind of navigation button so rollovers will appear different for each.
Pseudo-class selectors can make the rollovers in the navigation different than the text link rollovers in the body text on the page.
Easy to update, easy to add or delete primary navigation buttons.
Cons
Can be time-consuming to set up, especially when several different pseudo-class selector types are used.
Rearranging secondary button order as new products or departments are added is time-consuming and therefore adds to the cost.
Available only in a horizontal format.
     
     
 
<empty> <empty> <empty> <empty>
Button 1 Button 2 Button 3 Button 4
Button 1 Button 2 Button 3 Button 4
Button 1 Button 2 Button 3 Button 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut, fermentum congue, pharetra eu, massa. Suspendisse potenti. Morbi commodo mauris. Ut at pede. Ut id nisi. Donec scelerisque urna quis ligula. Praesent est. Vestibulum scelerisque. Curabitur quam. Fusce rhoncus pellentesque ipsum. Aenean venenatis metus ac quam. Maecenas lacus lacus, sagittis vitae, congue at, euismod eu, urna. Maecenas vitae purus. Praesent eros lectus, porta et, semper nec, molestie eget, tortor.
<empty> <empty> <empty> <empty>
Button 1 Button 2 Button 3 Button 4
Button 1 Button 2 Button 3 Button 4
Button 1 Button 2 Button 3 Button 4
Button 1 Button 2 Button 3 Button 4
<empty> <empty> <empty> <empty>
Button 1 Button 2 Button 3 Button 4
Button 1 Button 2 Button 3 Button 4
Button 1 Button 2 Button 3 Button 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut, fermentum congue, pharetra eu, massa. Suspendisse potenti. Morbi commodo mauris. Ut at pede. Ut id nisi. Donec scelerisque urna quis ligula. Praesent est. Vestibulum scelerisque. Curabitur quam. Fusce rhoncus pellentesque ipsum. Aenean venenatis metus ac quam. Maecenas lacus lacus, sagittis vitae, congue at, euismod eu, urna. Maecenas vitae purus. Praesent eros lectus, porta et, semper nec, molestie eget, tortor.
arguing ravens