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. There are videos on adding and styling DIVs and creating a navigation menu in my HTML and CSS YouTube playlist.

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.