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.
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.
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?
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.