Revising this Site

As I had mentioned earlier, I've been rebuilding the web site with more correct HTML and CSS. I've finished. What you're looking at right now validates (well almost--see an example). There are a few layout, navigation and functionality tweaks I've made, too, though they're mostly minor.

Update: Internet Explorer sucks; use Firefox. I've discovered that IE doesn't support the :hover event on anything but anchors. To make the menu work with IE I had had to do some minor retooling to the menu and add the hover "behavior" hack. I mostly like and use Firefox at work and home, and it works correctly; no hack required. Updated code is presented below.

The coolest thing I've learned is that creative use of CSS can result in almost JavaScript-like functionality. The menu above--which used to be a JavaScript menu--is built entirely of HTML and CSS. The JavaScript Tigra Menu worked just fine except that I stumble through making changes to it; I don't know JavaScript. Since I'm familiar with HTML and CSS editing it is much less daunting. Another benefit is that the HTML/CSS solution is smaller and will load quicker (8,998 bytes vs. 2,647 bytes). Another benefit is that if, by some odd chance, you have JavaScript disabled this menu will still work.

So anyway, here's how it works. The :hover pseudo-class is used to change the state of the submenu. For example, normally the danandsherree.com submenu is set to display : none; so it appears hidden. When you mouse-over it ("hover") the submenu status changes to display : block;--showing the submenu. Pretty slick.

The HTML:

<div id="menu">
<ul class="level1">
 <li class="submenu"><a href="/">danandsherree.com</a><ul class="level2">
   <li><a href="/">Go Home</a></li>
   <li><a href="/siteindex.php">Site Index</a></li>
  </ul>
 </li>
 <li class="submenu">Dan's Stuff<ul class="level2">
    <li><a href="/articles/cat_boy_scouts.php">Boy Scouts</a></li>
    <li><a href="/articles/cat_photography.php">Photography</a></li>
    <li><a href="/photos/">Photo Galleries</a></li>
    <li><a href="/articles/rc_cars/rc_history_and_experiences.php">R/C Cars</a></li>
  </ul>
 </li>
 <li class="submenu">Sherree's Stuff<ul class="level2">
   <li><a href="/articles/cat_crafts.php">Crafts</a></li>
   <li><a href="/articles/girl_scouts/girl_scout_troop_6213_materials.php">Girl Scouts</a></li>
  </ul>
 </li>
 <li class="submenu">Our Stuff<ul class="level2">
   <li><a href="/articles/cat_about_us.php">About Us</a></li>
   <li><a href="/articles/cat_assorted_fun.php">Assorted Fun</a></li>
   <li><a href="/articles/cat_christmas.php">Christmas</a></li>
   <li><a href="/articles/abouts_us/pinball_the_cat.php">Pinball the Cat</a></li>
   <li><a href="/articles/cat_travelogues_and_photos.php">Travelogues & Photos</a></li>
  </ul>
 </li>
 <li><a href="mailto:webmaster@danandsherree.com">E-mail Us</a></li>
</ul>
</div>

And the CSS that makes it happen:

div#menu {
	float: left;
	margin: 0;
	padding : 0px; }

div#menu ul {
	margin: 0;
	padding: 0;
	background: #f9f9f9;
	border: 1px solid red;
	border-width: 0 1px;
	font-family : Verdana, Arial, sans-serif;
	font-size : small;
	text-align : left; }

div#menu ul.level1 li,
div#menu ul.level1 li a {
	color : #fff;
	background : #3129a0; }

div#menu li {
	position: relative;
	list-style: none;
	margin: 0;
	float: left;
	padding: 5px 10px 5px 10px;
	border : 1px solid #fff;
	line-height: 1em;}

div#menu li:hover,
div#menu li a:hover {
	background: #3129a0;
	color : #FFF; }

div#menu li.submenu { }

div#menu li.submenu:hover,
div#menu li.submenu a:hover  {
	background: #3129a0;
	color : #fff; }

div#menu li a {	
	display: block;
	text-decoration: none; }

div#menu ul ul {
	background : #f9f9f9;
	color : #000;
	position: absolute;
	width : 150px;
	display: none;}

div#menu ul.level2 li {
	border-bottom: 1px solid red; }

div#menu ul.level2 li a {
	width : 150px; }

div#menu li.submenu li.submenu { }

div#menu li.submenu li.submenu:hover {
	background : #f9f9f9;}

div#menu ul.level1 li.submenu:hover ul.level2 {
	display:block;
	z-index : 100; }

div#menu ul.level2 {
	top: 1.5em;
	left: -1px;}

div#menu ul.level2 li,
div#menu ul.level2 li a {
	color : #000;
	background : #f9f9f9; }

div#menu ul.level2 li:hover,
div#menu ul.level2 li a:hover {
	color : #fff;
	background : #3129a0; }

...and the result is the menu you see at the top of the page!