In the previous tutorial, we discussed using the CSS display property to make an expanding menu like the one at the left. In that tutorial, only the small plus or minus sign image was clickable.

However, if you try the menu at the left, you'll see that all the words in the main headings are active and clickable; not just the small plus or minus signs.

If you look at the code for one of the menu <div>s, you might be surprised that there are no <a> tags or onClick, onMouseOver, or onMouseOut attributes in sight:

<div id="m0" class="mhead">
<img src="../plus.png"
    name="i0" border="0" width="12" height="12"> Search Engines
</div>
<div class="submenu" id="s0">
<a href="http://www.google.com/">Google</a> <br>
<a href="http://www.yahoo.com/">Yahoo!</a> <br>
<a href="http://www.excite.com/">Excite</a> <br>
<a href="http://www.lycos.com/">Lycos</a>
</div>

Nevertheless, the <div> knows to react to mouse clicks and mouse movement because we have used the CSS2 event model to achieve the effect we want.