#Table_01 {
position:absolute;
left:200px;
top:10px;
width:1000px;
height:800px;
}
#header_ {
position:absolute;
width:1000px;
height:97px;
}
#logo-nav_ {
position:absolute;
left:0px;
top:97px;
width:1000px;
height:117px;
}
#content-_ {
position:absolute;
left:0px;
top:214px;
width:1000px;
height:550px;
}
#footer_ {
position:absolute;
left:0px;
top:764px;
width:1000px;
height:36px;
}
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (site_layout.psd - Slices: footer) -->
<div id="Table_01">
<div id="header_">
<img id="header" src="http://www.webdesignforum.com/images/images/header.jpg" width="1000" height="97" alt="header slice" />
</div>
<div id="logo-nav_">
<img name="logo_slice" src="http://www.webdesignforum.com/images/images/logo-nav.jpg" width="1000" height="117" border="0" id="logo_slice" alt="" />
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Markets</a>
<ul>
<li><a href="#">Mined Materials & Metals</a></li>
<li><a href="#">Agricultural & Environmental</a></li>
<li><a href="#">Energy & Fuels</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Life Sciences</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Products</a>
<ul>
<li><a href="#">Consumables</a></li>
<li><a href="#">Inorganic</a></li>
<li><a href="#">Organic</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Metallography</a>
<ul>
<li><a href="#">Accessories</a></li>
<li><a href="#">Grinding and Polishing</a></li>
<li><a href="#">Hardness Tester</a></li>
<li><a href="#">Image Analysis & Management</a></li>
<li><a href="#">Mounting</a></li>
<li><a href="#">Optics</a></li>
<li><a href="#">Sectioning</a></li>
</ul>
</li>
<li><a href="#">Separation Science</a></li>
<li><a href="#">Used/Demos</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Support</a>
<ul>
<li><a href="#">Ask An App Question</a></li>
<li><a href="#">Live Chat</a></li>
<li><a href="#">Manuals</a></li>
<li><a href="#">PIB</a></li>
<li><a href="#">Preventive Maintenance</a></li>
<li><a href="#">Diagnostics</a></li>
<li><a href="#">App Labs</a></li>
<li><a href="#">Warranty</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Resources</a>
<ul>
<li><a href="#">App Library</a></li>
<li><a href="#">Approved Methods</a></li>
<li><a href="#">Articles & Reference</a></li>
<li><a href="#">Leasing</a></li>
<li><a href="#">Mobile Labs</a></li>
<li><a href="#">MSDS</a></li>
<li><a href="#">Reference Cards</a></li>
<li><a href="#">Tradeshows</a></li>
<li><a href="#">e-Seminars</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Corporate</a>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Corporate Profile</a></li>
<li><a href="#">Worldwide</a></li>
<li><a href="#">Privacy Statement</a></li>
<li><a href="#">Search</a></li>
</ul>
</li>
</ul>
</div>
<div id="content-_">
<img id="contentx20" src="http://www.webdesignforum.com/images/images/content-.gif" width="1000" height="550" alt="content slice" />
</div>
<div id="footer_">
<img id="footer" src="http://www.webdesignforum.com/images/footer.jpg" width="1000" height="36" alt="footer slice" />
</div>
</div>
<!-- End Save for Web Slices -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
ul.submenu {
margin:0;
padding:0;
height:30px;
width:auto;
}
ul.submenu li {
list-style-type:none;
float:left;
margin:0;
padding:0;
}
ul.submenu a:link, ul.submenu a:visited {
display:block;
text-align:center;
text-decoration:none;
text-transform:capitalize;
padding:0 10px;
margin:0;
height:30px;
line-height:30px;
color:#555;
background-color:#eee;
font:normal 8pt Tahoma;
}
ul.submenu a:hover, ul.submenu a:focus {
background-color:#ccc;
color:#fff;
}
<li><a class="MenuBarItemSubmenu" href="#">Markets</a>
<ul class="submenu">
<li><a href="#">Mined Materials & Metals</a></li>
<li><a href="#">Agricultural & Environmental</a></li>
<li><a href="#">Energy & Fuels</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Life Sciences</a></li>
</ul>
</li>
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
top: 60px;
}
/*
ul.style {
blah;
blah;
}
*/
ul.MenuBarHorizontal {
style for list
}
ul.MenuBarHorizontal li {
style for list items
}