<style type="text/css"> 

#menuBar {position: absolute; 

                  left: 0; 

                  top: 0; 

                  width: 100%; 

                  height: 22px; 

                  border: 1px solid #99ffff; 

                  background-color: #99ffff; 

                  layer-background-color: #99ffff; 

                 } 

.daMenu {position: absolute; 

               width: 100px; 

               height: 22px; 

               border: 1px solid #99ffff; 

               top: 0px 

              } 

</style>



...



<div id="menuBar"> </div> <div id="webmonkey" class="daMenu"> Webmonkey </div>  

 Which would look like this:

Next you need to construct the list that appears when you click on Webmonkey. So let's list the monkeys.

<style> 

.moreMenu {position: absolute; 

                    width: 100px; 

                    border: 1px solid red; 

                    background-color: red; 

                    layer-background-color: red; 

                    top: 22px; 

                    } 

</style>



...



<div id="moreMonkey" class="moreMenu"> Aaron

   <br> Captain Cursor

   <br> Cassandra

   <br> Chris

   <br> Courtney

   <br> Jeff

   <br> Joanne

   <br> Jean Pierre

   <br> Klug

   <br> Kristin

   <br> Nadav

   <br> Taylor

   <br> Thau

   <br> Tim

   <br> Wendy

   <br> 

</div> 

Which, when combined with the rest of the bar, looks something like this:

So now that you have the menu bar all laid out, you can hook it up to some script and make it useful. The first thing you should do is take the moreMenu class and turn off its visibility. Most menus aren't active and visible when the window comes up initially. So you should change the class selector to read:

.moreMenu {position: absolute; 

                           width: 100px; 

                           border: 1px solid red; 

                           background-color: red; 

                           layer-background-color: red; 

                           visibility: hidden; 

                           top: 22px; 

                          }

So while the DIV is still there on the page, it has been rendered invisible by the browser.