Drop down menus without Java II

Here is an example of the revised CSS based menu used on this site.



Welcome to version 2 of my site menus. The main thing I wanted for these was for the drop down part to be wider than the menu title. It wasn't quite as easy as I first imagined. One important thing about this menu is that it works in Internet Explorer as well as Safari, and it doesn't rely on the ordered list of links that most pure CSS menus use.

What I eventually decided to do was to offset each menu by a certain amount to force them to overlap each other, since each menu created its own border, this wasn't a problem visually, and when the lower part dropped down, it showed as being wider than the title portion. So far so good. The tricky part came in making the offset happen in both IE and Safari. Since Safari deals with CSS properly, this was pretty easy, but making IE happy was another story entirely, and that's where things got ugly.

For comparison, here is a page showing the original menu and the source code. The style sheet is pretty much unchanged, the width of the menus has been increased, for font size decreased slightly, and the text justification has been changed to left for all items. Below is the new CSS code:


#menubox{
background-color: #036;
margin: 1px;
height: 23px;
z-index: 9;
}
#menucont {
color: #069;
background-color : transparent;
position: absolute;
z-index: 2;
}
.menublock, .display {
float:left;
width:175px;
background-color: #036;
}
.subs{
background-color: #036;
}
.subs a{
display: block;
}
.menublock .subs{
display: none;
}
#menucont a.tl, #menucont a.tl:hover, #menucont a.tl:active, #menucont a.sl, #menucont a.sl:hover, #menucont a.sl:active {
font-family: "lucida grande", "Lucida Sans Unicode", verdana, sans-serif;
font-size: 10px;line-height: 17px;
display: block;
text-decoration: none;
color: #fff;
background-color: #069;
margin: 1px 1px 1px 1px;
padding: 2px 2px 2px 2px;
order: none;
text-align: left;
font-weight: normal;
}
#menucont a.tl:hover, #menucont a.tl:active , #menucont a.sl:hover, #menucont a.sl:active{
background-color: #036;
text-align: center;
}
#menucont a.sl, #menucont a.sl:hover, #menucont a.sl:active{
text-align: left;
}


And below is the new menu. There is a new column for Recent Entries, and you'll also notice that I have two dummy columns (first and last). The dummy columns were mainly necessary to help IE handle the positioning code in place on each menu. The first column uses a position:absolute to fix the positioning, the other menus use a position:relative, with a left adjustment for each column forcing each menu to overlap the prior menu.

Column 1 is overwritten entirely, and the last column is there to blank out the portion of the 2nd to last column that would have been overwritten had there been another menu. One last hack necessary there was to manually set the color of that column to be the background color used, causing it not to display. I couldn't come up with any good code that worked to put into the style sheet itself that worked correctly, so this hack is in place for now until I either figure a better way to do this, or go to a new menu system.

I don't know if this is still considered 'pure' CSS anymore since I had to add in all the style commands within the HTML code itself, but at least it works.


<div id="menubox">
<!-- BEGIN MENU -->
<div id="menucont">
<div class="menublock" style="position: absolute" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
<a class="tl" href="#">   </a>
</div>
<div class="menublock" style="position: relative; left: 0px" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
<a class="tl" href="http://www.wrightthisway.com/AboutThisSite.html">About This Site</a>
<div class="subs">
</div>
</div>
<div class="menublock" style="position: relative; left: -80px" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
<a class="tl" href="http://www.wrightthisway.com/Downloads.html">Downloads</a>
<div class="subs">
</div>
</div>
<div class="menublock" style="position: relative; left: -160px" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
<a class="tl" href="">Categories</a>
<div class="subs">
<MTCategories>
<a class="sl" href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel></a>
</MTCategories>
</div> </div> <div class="menublock" style="position: relative; left: -240px" onmouseover="this.className='display'" onmouseout="this.className='menublock'"> <a class="tl" href="">Recent Entries</a> <div class="subs"> <MTEntries lastn="15"> <a class="sl" href="<$MTEntryLink$>"><$MTEntryTitle sanitize="1"$></a> </MTEntries> <a class="sl" href="<$MTBlogRelativeURL$>archives.html">More...</a> </div> </div> <div class="menublock" style="position: relative; left: -320px; width:80px" onmouseover="this.className='display'" onmouseout="this.className='menublock'">
<a class="tl" href="#" style="background-color: #036">   </a>
</div>
</div>
<!-- CLOSE menucont -->
</div>
<!-- CLOSE box and the menu -->



So far the only problems I've seen are if the browser window is set too narrow, it can cause the last column(s) to not draw properly, resizing the browser window and refresing takes care of that problem. I think this flaw more than anything else maybe what drives me to find another menu scheme. For that, I'll either need to go to a solution incorporating Java to allow better cross-browser compatibility, or go with newer CSS code and drop support for older incompatible browsers.