Menu 1
Some extra content or links
Menu 2
Notice that this menu uses the same style, yet the height is much greater
Menu 3
The overflow property is set to hidden so that this text doesn't appear when the <div> is small
Menu 4
The :hover selector is used to change the height to auto, which resizes the <div> to fit the content
This <div> uses position: absolute

DIV Examples

This page shows how you can use <div>s and CSS to create things like navigation bars, menus and a flexible table-like layout. This page doesn't use any JavaScript or images, although you could use image for icons or backgrounds. View the source to see how it's done - pay particular attention to the <style> section at the top.

The menu across the top is easy to create - the one down the side was a little more fiddly (and doesn't appear in IE8) because of positioning, but they use the same basic principle - the <div> is small with the content hidden, and then it expands to show the content when the mouse is moved over it.

No Tables!

Many web designers frown upon the use of tables for laying-out pages - it went out of fashion in the early noughties.

Tables are OK for tables of information, but for other things it's better to use floating <div>s.

Tables are very rigid, and don't cope well with screens of different sizes and shapes.

Why Is That?

Using <div>s is much more flexible. You don't know that the person looking at your page is using a computer, you don't know how wide their screen is, and they might be using a screen - such as a phone or a tablet - that is taller than it is wide.

Resize your browser window so that it is too narrow to fit these two boxes side by side - what happens?


Problems With Drop-Down Menus

The problem with using drop-down menus like these - whether you use JavaScript, CSS, Flash or any other technique - is that not everyone has a mouse. If you are using a mobile phone, tablet, or other device with a touch-screen, for example, you will see that you can't easily open the menus.