Drop-down menu effects implemented with CSS

<!--Add the following code to the head area-->
<style type= "Text/css" >

#cssdropdown, #cssdropdown ul
padding:0;
margin:0;
List-style:none;
}

#cssdropdown Li {
Float:left;
position:relative;
}

. mainitems{
BORDER:1PX solid black;
Background-color: #FFEEC6;
}

. Mainitems a{
margin-left:6px;
margin-right:8px;
Text-decoration:none;
}

. subuls{
Display:none;
Width:10em;
Position:absolute;
Top:1.2em;
left:0;
Background-color:lightyellow;
BORDER:1PX solid black;
}

. Subuls li{
width:100%;
}

. subuls Li A{
Text-decoration:underline;
}

#cssdropdown Li>ul {/* to override, browsers, than IE, abound'll position to the top right of the Containin G Li, rather than NRC left */
Top:auto;
Left:auto;
}

#cssdropdown Li:hover ul, Li.over ul {/* lists nested under list items * *
Display:block;
}

#restofcontent {/*wrap Rest of the content of the page inside this div*/
Clear:left;
}

</style>

<script type= "Text/javascript" ><!--//--><! [cdata[//><!--
Startlist = function () {
if (Document.all&&document.getelementbyid) {
Cssdropdownroot = document.getElementById ("Cssdropdown");
For (i=0 i<cssdropdownroot.childnodes.length; i++) {
node = cssdropdownroot.childnodes[i];
if (node.nodename== "LI") {
Node.onmouseover=function () {
this.classname+= "Over";
}
Node.onmouseout=function () {
This.classname=this.classname.replace ("Over", "");
}
}
}
}
}

if (window.attachevent)
Window.attachevent ("onload", startlist)
Else
Window.onload=startlist;

--><!]] ></script>

<!--Add the following code to the body area-->
<ul id= "Cssdropdown" >

<li class= "Mainitems" >
<a href= "http://www.jzread.com" >css gallery</a>
<ul class= "Subuls" >
<li><a href= "http://www.jzread.com" >gordon mac</a></li>
<li><a href= "http://www.jzread.com" >juiced thoughts</a></li>
<li><a href= "http://www.jzread.com" >the daily flight</a></li>
<li><a href= "http://www.jzread.com" >GrapeFruit</a></li>
</ul>
</li>

<li class= "Mainitems" >
<a href= "http://www.jzread.com" >css examples</a>
<ul class= "Subuls" style= "Width:15em" >
<li><a href= "http://www.jzread.com" >css2 generated content</a></li>
<li><a href= "http://www.jzread.com" >custom ScrollBar colors</a></li>
<li><a href= "http://www.jzread.com" >markerless and "no indent" lists</a></li>
</ul>
</li>

</ul>