I had this idea when I was hacking the MonoBook theme for wikis and I wondered if I could move the link menus to the top in drop down menus for a more streamlined look. Obviously I want my site to be compatible with JavaScript disabled because a lot of us disable it for most sites, especially ones that are associated with hacking.
I came up with using display: none and display: block that would activate on hovering above the menu title.
The code I give here has the styles stripped out except for exactly what is needed to make this trick work so that it's easier for beginners to follow. You should add your own styles based on the theme of your site.
/* The menu is moved to the location of the page where we want it. This is moving the whole menu. */
div#p-navigation {
position: absolute;
top: 48px;
right: 440px;
z-index: 5;
}
/* Only the drop down part of the menu is styled here. It is hidden by default. */
div#p-navigation div.pBody {
display: none;
}
/* When the user hovers above the menu title, it becomes visible. */
div#p-navigation:hover div.pBody {
display: block;
}
/* This is just style for the menu title. I added a different color background so it looks like a button that the user will identify and hover over. */
div#p-navigation h3 {
font-size: 15pt;
background: #222;
color: #aaa;
}
The drop down portion of the menu looks fine even though it isn't animated. Without scripting you can't make it persist for a second if the user moves the mouse off accidentally. As long as the menu is fairly wide it shouldn't be a problem.
Since you don't have scripting to control this, you need to have the menu tags inside of the title tags.
