OK I think I got you going on the right path :-)
I use firefox web designer toolbar, it is invaluable.
outlining your block level elements we see they are overlapping and a bit jumbled, I made a few code changes and smoothed it out a bit, you need to fine tune your padding and margins to get the final setup you want.
http://i130.photobucket.com/albums/p248/pug2775/coffeecup/ScreenShot023.jpg
the updated CSS: (comments added)
/*** ESSENTIAL STYLES ***/
.menu-menu, .menu-menu * {
margin:0;
padding:0;
list-style:none;
}
.menu-menu {
margin:10px 0 0 100px; /* top right bottom left */
line-height:1.0;
}
.menu-menu ul {
position:absolute;
top:-999em;
width:100px; /* submenu item width - offest below must match */
}
.menu-menu li {
width:100px; /* Default to 'auto'. If specified, the submenu item width and offset must match */
}
.menu-menu li a {
text-align:center;
}
.menu-menu li li a {
text-align:left;
}
.menu-menu ul li {
width:100%;
}
.menu-menu li ul {
display:none;
}
.menu-menu li:hover ul {
display:block;
}
.menu-menu li li ul {
display:none;
}
.menu-menu li:hover li:hover ul {
display:block;
}
.menu-menu li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}
.menu-menu li {
float:left;
position:relative;
}
.menu-menu a {
display:block;
position:relative;
}
.menu-menu li:hover ul,
.menu-menu li.sfHover ul {
left:0;
top:18px; /* match top ul list item height */
z-index:2;
}
ul.menu-menu li:hover li ul,
ul.menu-menu li.sfHover li ul {
top:-999em;
}
ul.menu-menu li li:hover ul,
ul.menu-menu li li.sfHover ul {
left:100px; /* submenu offest - must match ul width above */
top:0;
}
ul.menu-menu li li:hover li ul,
ul.menu-menu li li.sfHover li ul {
top:-999em;
}
ul.menu-menu li li li:hover ul,
ul.menu-menu li li li.sfHover ul {
left:100px; /* submenu offest - must match ul width above */
top:0;
}
/*** DEMO SKIN ***/
.menu-menu {
float:left;
margin-bottom:1em;
font-family:Tahoma, Verdana, Arial;
font-size:12px;
font-weight:normal; /* bold or normal */
font-style:normal; /* italic or normal */
}
.menu-menu a {
border-right:1px solid #004E98;
border-top:1px solid #004E98;
border-bottom:1px solid #004E98;
padding:3px 2px;
text-decoration:none;
}
.menu-menu li.first a {
border-left:1px solid #004E98;
}
.menu-menu a, .menu-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#000000;
}
.menu-menu a:hover, .menu-menu a:active { /* visited pseudo selector so IE6 applies text colour*/
color:#FFFFFF;
}
.menu-menu li li a {
border:1px solid #004E98; border-top-width:0;
}
.menu-menu li li li.first a {
border:1px solid #004E98;
}
.menu-menu li {
background:#FFFFFF;
}
.menu-menu li li {
background:#FFFFFF;
}
.menu-menu li li li {
background:#FFFFFF;
}
.menu-menu li:hover, .menu-menu li.sfHover,
.menu-menu a:focus, .menu-menu a:hover, .menu-menu a:active {
background:#3366FF;
outline:0;
}
.menu-menu li li a, .menu-menu li li a:visited {
color:#000000;
}
.menu-menu li li a:hover, .menu-menu li li a:active, .menu-menu li li a:focus {
color: #FFFFFF;
}
/*** arrows **/
.menu-menu a.sf-with-ul {
padding-right:2.25em;
min-width:1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position:absolute;
display:block;
right:.75em;
top:1.05em; /* IE6 only */
width:10px;
height:10px;
text-indent:-999em;
overflow:hidden;
background:url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top:.8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position:-10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.menu-menu ul .sf-sub-indicator { background-position:-10px 0; }
.menu-menu ul a > .sf-sub-indicator { background-position:0 0; }
/* apply hovers to modern browsers */
.menu-menu ul a:focus > .sf-sub-indicator,
.menu-menu ul a:hover > .sf-sub-indicator,
.menu-menu ul a:active > .sf-sub-indicator,
.menu-menu ul li:hover > a > .sf-sub-indicator,
.menu-menu ul li.sfHover > a > .sf-sub-indicator {
background-position:-10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background:url('../images/shadow.png') no-repeat bottom right;
padding:0 8px 9px 0;
-moz-border-radius-bottomleft:17px;
-moz-border-radius-topright:17px;
-webkit-border-top-right-radius:17px;
-webkit-border-bottom-left-radius:17px;
}
.sf-shadow ul.sf-shadow-off {
background:transparent;
}
<!--
body {
background-image: url('Images/realbg.gif');
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:90%;
max-width:1024px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
div#container {
width:90%;
height:100%;
margin: 0 auto;
text-align: left
}
div#header {
padding: 0 0 0 0;
margin: 0px;
height: 120px;
text-align:center;
vertical-align:middle;
background-color:#FFFFFF;
}
div#wrapper {
width: 100%;
background-image:url('Images/blue31.jpg');
background-repeat:repeat-x;
border-top-style:ridge;
border-bottom-style:none;
text-align:center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
/*added new id*/
div#wrapper2 {
width: 100%;
background-image:url('Images/blue31.jpg');
background-repeat:repeat-x;
border-top-style:ridge;
border-bottom-style:none;
text-align:center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
div#left {
background-color:#FFFFCC;
background-image:url('Images/leftcolumncorner.gif');
background-repeat:no-repeat;
width: 200px;
height:100%;
text-align:left;
padding: 15px 10px 25px 15px;
border-right-style:ridge;
border-right-color:#FFCC66;
margin-top: 1px;
float: left;
}
#left a:link {
color: #000099;
font-weight:bold;
text-decoration: none;
}
#left a:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
}
#left a:hover {
color: #006600;
font-weight:bold;
text-decoration: underline;
}
#left p {
line-height: 12px;
}
div#main {
background-color:#FFFFFF;
margin-top: 1px;
height:100%;
text-align:left;
margin-left: 230px; /*changed from 200px*/
margin-right: 212px; /*changed from 180px*/
line-height: 120%;
padding: 15px 45px 15px 45px;
}
#main p {
line-height:200%;
text-align:left;
}
#main a:link {
color: #000099;
font-weight:bold;
text-decoration: none;
}
#main a:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
}
#main a:hover {
color: #006600;
font-weight:bold;
text-decoration: underline;
}
div#right {
background-color:#FFFFCC;
background-image:url('Images/rightcolumncorner.gif');
background-position:right top;
background-repeat:no-repeat;
text-align:left;
width: 180px;
height:100%;
padding: 15px 10px 25px 15px;
margin-top: 1px;
float: right;
border-left-style:ridge;
border-left-color:#FFCC66;
}
div#footer {
padding: 0px;
margin: 0px;
font-family:Bookman Old Style;
font-size: 12px;
Color: #FFFFFF;
font-weight:bold;
border-top: thin solid #000000;
clear:both;
}
-->
updated HTML: (comments added to changes)
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="generator" content="CoffeeCup HTML Editor (
www.coffeecup.com)" />
<meta name="created" content="Tue, 18 May 2010 18:59:14 GMT" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">
</head>
<body>
<div id="container">
<div id="header">
<img src="Images/SBFFLogoWebsite.gif" height="120" alt="Small Business Finance Forum" align="left">
<img src="Images/GroupFromAboveA.gif" height="120" align="right">
</div>
<div id="wrapper">
<ul class="menu-menu">
<li class="first"><a href="index.html">Home</a></li>
<li>
<a href="tools.html">Tools</a>
<ul>
<li class="first"><a href="budgeting.html">Budgeting</a></li>
<li><a href="capitalcredit.html">Capital & Credit</a></li>
<li><a href="cashflow.html">Cash Flow</a></li>
<li><a href="financials.html">Financials</a></li>
<li><a href="metrics.html">Metrics</a></li>
<li><a href="planning.html">Planning</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="riskmanagement.html">Risk Management</a></li>
<li><a href="strategy.html">Strategy</a></li>
<li><a href="tracking.html">Tracking</a></li>
<li><a href="valuation.html">Valuation</a></li>
</ul>
</li>
<li><a href="casestudies.html">Case Studies</a></li>
<li>
<a href="services.html">Services</a>
<ul>
<li class="first"><a href="consulting.html">Consulting</a></li>
<li><a href="speaker.html">Speaker</a></li>
</ul>
</li>
<li><a href="http://www.smallbusinessfinanceforum.com/blog">Blog</a></li>
<li><a href="contact.html">Contact Us</a></li>
<!-- remove this </ul> -->
</div>
<div id="wrapper2">
<div id="left">
<p><a href="http://www.html"><img src="Images/bluebutton.gif" height="14" border="0"/> Home</a></p>
<p><a href="http://www.talentcapitalresource.com/contact.html"><img src="Images/bluebutton.gif" height="14" border="0"/> Contact</a></p>
</div>
<!-- moved up before right div -->
<div id="main">
Just need something to start
</div>
<div id="right">
<font size="3" face="Baskerville Old Face" color="#000080"><strong>We recommend </font></strong><br /><br />
</div>
</div>
<div id="footer">
<center>
<br />Small Business Finance Forum Copyright 2010
</div>
<!--</container>-->
</div>
</body>
</html>
Results:
http://i130.photobucket.com/albums/p248/pug2775/coffeecup/ScreenShot024.jpg