CSS SNIPPET
/* Page Setup */
body,html { color:#636363; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:21px; background-color:#FFF; text-align:center; width:100%; }
a {text-decoration:none}
a:link {color:#344273}
a:active {color:#344273}
a:visited {color:#344273}
a:hover {color:#000}
/* Wrapper */
#page-wrapper { width:863px; margin:0 auto; text-align:left; }
/* Header */
#header { width:100%; height:103px; background:url(../imgs/rule.png) no-repeat bottom left; position:relative; }
#header h1 { float:left; margin-top:14px; height:58px; width:235px; background:url(../imgs/logo.png) no-repeat; overflow:hidden; text-indent:-999px }
#header p { float:right; font-variant:small-caps; font-weight:bold; margin:25px 10px 0 0; }
#menu { position:absolute; bottom:0; right:0; }
#menu .top { position:relative; float:left; height:35px; padding:17px 15px 0 15px; background:url(../imgs/bg-menu.png) repeat-x; margin-left:2px; color:#000; }
#menu .top a { color:black; }
#menu .top:hover { cursor:default; background:url(../imgs/bg-menu-hover.png) repeat-x; }
#menu .selected { background:url(../imgs/bg-menu-hover.png) repeat-x; }
#menu .sub { display:none; z-index:999; position:absolute; top:42px; left:0; border:1px solid #c7e5ff; background-color:#bddffd; list-style-type: none; padding: 0px; margin: 0px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px;}
#menu .sub li { color:#0043a3; width:210px; }
#menu .sub .first { color:#000; padding:6px 15px; width:255px; display:inline-block; float:left; margin:0px; }
#menu .sub .second, #menu .sub .third { float:left; font-size:11px; padding:6px 15px; line-height:13px; background:url(../imgs/menu-bullet.png) no-repeat 25px 9px; }
#menu .sub .second:hover, #menu .sub .third:hover, #menu .sub .first:hover { cursor:pointer; text-decoration:underline; }
#menu .sub .second { padding-left:40px; width:230px }
#menu .sub .third { padding-left:60px; background:url(../imgs/menu-bullet.png) no-repeat 45px 9px; }
/* Fader */
#fader { width:862px; height:350px; margin:15px auto; }
#fader-images { float:left; width:862px; height:305px; overflow:hidden; }
#fader-images li { float:left; width:862px; height:305px; }
#fader-images li:hover { cursor:pointer }
#fader-images .low-cost { background:url(../imgs/fader-low-cost.jpg) no-repeat; }
#fader-images .unison { background:url(../imgs/fader-unison.jpg) no-repeat; display:none; }
#fader-images .web-portal { background:url(../imgs/fader-web-portal.jpg) no-repeat; display:none; }
#fader-buttons { float:left; width:862px; height:45px; }
#fader-buttons li { float:left; height:35px; padding-top:10px }
#fader-buttons li:hover { cursor:pointer }
#fader-buttons .low-cost { width:287px; background:url(../imgs/button-low-cost-hover.png) no-repeat; }
#fader-buttons .unison { width:287px; background:url(../imgs/button-unison.png) no-repeat; }
#fader-buttons .web-portal { width:288px; background:url(../imgs/button-web-portal.png) no-repeat; }
#fader-buttons li { color:#FFF; font-weight:bold; text-align:center; font-size:15px; }
#fader-buttons a li { color:#FFF; }
/* Rule */
.rule { width:863px; height:10px; margin:0 auto 15px auto; background:url(../imgs/rule.png) no-repeat; }
HTML SNIPPET
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" DESCRIPTION " />
<title>Symphony Networks</title>
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="./css/ie6fix.css" /><![endif]-->
<link type="text/plain" rel="author" href="./humans.txt" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body onload="MM_preloadImages('./imgs/button-web-portal-hover.png','./imgs/button-unison-hover.png','./imgs/button-low-cost-hover.png','./imgs/bg-menu-hover.png')">
<div id="page-wrapper">
<div id="header">
<a href="/"><h1>Symphony Networks</h1></a>
<p>complex networks made simple</p>
<ul id="menu">
<li class="top"><a href="">Technology</a>
<ul class="sub">
<a href="#mooo"><li class="first">Distributed System Components</li></a>
<a href=""><li class="second">HARMONY - Distributed object oriented language</li></a>
<a href=""><li class="second">Software Framework</li></a>
<a href=""><li class="second">Embedded Virtual Machine (VM)</li></a>
<a href=""><li class="second">Networking Technologies</li></a>
<a href=""><li class="third">6LoWPAN </li></a>
<a href=""><li class="third">IEEE 802.15.4 </li></a>
<a href=""><li class="third">Location Sensing </li></a>
</ul>
</li>
;)
