Block Menu

Here is a menu example

This page shows an example of a hover-activated menu of links. When you hover over a topic, the associated list of links appears. The links just go to sections of the notes pages that we have already looked at. The link area associated with each topic is not very full, and rather more could be placed there. The box which appears is just an ordinary div, so any HTML markup you like might be used: Columns of links, lists, image links, etc. I didn't want to do a lot there, since it's better if the examples try to do one thing at a time.

Some menus are implemented using JavaScript, and it is more flexible. This menu is implemented entirely in HTML and CSS. The links which appear when you hover on a topic, are actually nested inside the divs that display the topic names in the HTML. But they are positioned outside the area where the topic name is displayed, so they are overflow. Then the overflow is hidden so you don't normally see it, but the overflow style is changed to visible using a hover pseudo op.