So what is wave? why am I talking about it? While the demo itself is simply amazing and the application looks like the next generation of Gmail evolution, what excites me more than anything is behind the scene technology.

If you are a web developer you might remember those good old days of web, when Javascript was a “client-side validation” scripting thingy. Now with the new and upcoming HTML 5 and Javascript ECMAScript5 coming to almost all browsers, we are seeing a new powerful platform. One that can help us built really high quality web applications.

So what’s all that special about HTML 5?

To get some context around this, let me recap what we currently use. Most of the websites (pretty much all of them) are currently on HTML 4 standard — which is a decade old standard. Web has evolved therefore HTML standard needed to evolve too.

So HTML 5 is being developed since 2004 and so far it is still being specd out. Which means that it will change over the next year or so before it is finalized, but the guts are out there now.

I won’t go into a lot of details about HTML5 in this post but would like to touch upon two things that really stood out for me:

1. Structure

How many times you have defined your HTML with class/id attributes structure it with header, footer, content, sidebar etc? HTML5 fixes this issue by providing new elements for representing each of these different sections. So elements like <header>, <nav>, <aside>, <article>, <footer> etc.

Makes it better for everyone to write and read the HTML code. Search engines can target your content and designers get to leverage it as well.

2. Video & Audio

We all have been embedding youtube videos for a while now. There is one in this blog post. HTML really didn’t have any way to allow embedding video and audio content easily into a website. So people had to use flash. So now in HTML5 we have an <video> and <audio> tags. Along with DOM API to manipulate and interact with the video and audio.

There is a lot more to the story. I will write in more details about the upcoming Javascript changes and what it means to us web developers. I am truly excited at the possibilities that it will bring to the web.

So here is a quick tutorial on how to create a dropdown menu using nothing but CSS. I am not claiming that I am the only person to have figured this out. I am also not claiming that this is the best solution out there. This is just here for you to learn, and for you to tell me what/how can I improve on it. Its all about learning.

Here we go:

Markup:

<div id=”menubutton”>
<ul class=”button”>
<li class=”">
<h2><a href=”#”>Share / Bookmark</a></h2>
<ul>
<li class=”first”><a href=”#”>Email Friends</a></li>
<li><a href=”#”>Facebook</a></li>
<li><a href=”#”>Google</a></li>
<li><a href=”#”>Delicious</a></li>
<li><a href=”#”>Digg</a></li>
<li class=”last”><a href=”#”>Stumble Upon</a></li>
</ul>
</li>
</ul>
<ul class=”button”>
<li class=”">
<h2><a href=”#”>I am another button</a></h2>
<ul>
<li class=”first”><a href=”#”>Email Friends</a></li>
<li><a href=”#”>Facebook</a></li>
<li><a href=”#”>Google</a></li>
<li><a href=”#”>Delicious</a></li>
<li><a href=”#”>Digg</a></li>
<li class=”last”><a href=”#”>Stumble Upon</a></li>
</ul>
</li>
</ul>
</div>

The structure is a bit crude (i think) but essentially provides a “menubutton” div container that will contain all of our buttons. Each button is a UL list with an h2 element with an anchor element inside it. This provides us with a simple text heading for the button. The LI also contains another UL list that will be used as a drop down menu. For the sake of simplicity and time, I have given the first and last elements in this list class of first and last respectively. This helps in styling the button. You shall see.

The CSS:

The CSS for this whole this is like this:

#menubutton {
z-index: 30;
}
#menubutton ul.button, ul {
list-style: none;
margin: 0;
padding: 0;
margin-right: 5px;
float: left;
}
#menubutton a, #menubutton h2 {
margin: -2px 0 0;
padding: 3px;
}

#menubutton a {
font-size: 12px;
text-decoration: none;
color: #3c89c8;
text-align: left;
}
#menubutton a:hover {
color: #1b325f;
}
#menubutton li {
position: relative;
}
#menubutton ul.button li ul {
position: absolute;
}
#menubutton ul.button li ul li {
padding: 5px 10px 5px 5px;
background-color: #fff;
border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}

#menubutton ul.button li ul li.first {
border-top: 1px solid #e1e1e1;
}

#menubutton ul.button li ul li.last {
border-bottom: 1px solid #e1e1e1;
padding-bottom: 5px;
}

div#menubutton ul.button li ul {
display: none;
margin-top: 0px;
}

div#menubutton ul.button li:hover h2 {
border-top: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
}

div#menubutton ul.button li ul li:hover {
background: #eeeeee;
}

div#menubutton ul.button li:hover ul {
display: block;
}

div#menubutton ul.button li ul li {
margin: 0;
font-family: Arial, Helvetica, sans-serif;;
text-align: left;
width: 140px;
}

div#menubutton ul.button li span a {
display: block;
}

li.menubutton ul {
width: 140px;
}

li.menubutton h2 {
padding: 5px;
}

Phew, that’s a lot of CSS.. I am not going to go through the details of the CSS but going to touch on one little trick that is being used here that makes it interesting. The UL that represents the dropdown menu is initially hidden by “display: none” property. We setup over hover monitoring via css on the LI that contains the H2 title and set this property to “block”. Voila! This makes the effect simple and very powerfull.

Give it a try. See it in action.

As always, your comments/suggestions are always welcome. Maybe there is a better way to structure the CSS so that its easily themeable. But I didn’t spend that much time on this so wanted to keep it simple for my own proof of concept.