the drop down menu is missaligned in both firefox and IE. i noticed that in IE, the drop down items appear perfectly aligned with the next base menu link. it is really strange. here's my source, hopefully somone can pioint me in the right direction
body,
html {
margin:0;
padding:0;
/*background:#FBF8ED;*/
/*background: #EEE8AA;*/
background: #384252;
color:#000;
font : 12px Trebuchet MS, Helvetica, sans-serif;
/*font-weight: bold;*/
}
body {
min-width:750px;
height: 100%;
}
h4 {
font-size : 1.4em;
color : #003E5F;
text-indent: 20px;
margin: 0;
padding: 0;
}
h5 {
font-size : 2em;
color : #003E5F;
text-indent: 20px;
text-align: right;
margin: 0;
padding: 0;
}
h6 {
font-size : 1em;
font-style: bold;
color : #000;
text-indent: 10px;
text-align: center;
margin: 0;
padding: 0;
}
h1 {
font-size : 1.2em;
font-weight: 900;
text-indent: 10px;
color : #003E5F;
margin: 0;
padding: 0;
font : Arial, Verdana, Helvetica, sans-serif;
}
h2 {
font-size : 1.7em;
font-weight: bolder;
color : #003E5F;
font : Verdana, Helvetica, sans-serif;
display: inline;
}
h3 {
font-size : 2.0em;
font-weight: bolder;
color : #000;
margin: 0;
padding: 0;
font : Tahoma, Helvetica, sans-serif;
display: inline;
}
.cursive {
font-family: fantasy;
font-size: 24px;
color: #000000;
margin:0;
padding:0;
}
hr {
color: #330066;
height: 1px;
width: 75%;
text-align: left;
margin: 0 auto 0 0;
}
p {
text-indent: 20px;
line-height: 2em;
}
a {
text-decoration: none;
color: #333366;
}
img {
margin-left: 0 auto;
margin-right: 0 auto;
}
.right{
text-align: right;
}
#page {
background:#96A3BE;
margin:0 auto;
width:750px;
border: solid;
/*border-bottom-color: #FFF;*/
border-width: 2px;
height: 100%;
position: relative;
min-height: 100%;
overflow: hidden;
border-bottom-style: none;
}
#header {
background:#003E5F;
background-image: url(null);
color: #000;
padding: 10px;
margin-right: auto;
margin-left: auto;
text-align: center;
border: 0px solid #FFF;
height: 60px;
position: relative;
}
#header h1 {
font-size : 2em;
color : #333366;
text-indent: 20px;
text-align: right;
margin: 0;
padding: 0;
}
#sidebox {
background:#CCC;
height: 50px;
width: 220px;
display: inline;
color : #333366;
vertical-align: bottom;
float: right;
margin: 0 auto;
padding: 0px;
position: absolute;
top: 50px;
right: 0;
border: solid;
border-width: 0px;
/*
border-right-style: #none;
border-left-style: #none;
border-top-style: #none;
border-bottom-style: #none;
border-left-style: solid;
border-left-color: #FFF;*/
}
#content {
background:#DEE0D4;
margin: 0 auto;
float:left;
width:500px;
min-height: 100%;
border: solid;
border-width: 2px;
overflow: hidden;
border-color: #CCCCCC;
border-right-color: #FFF;
padding: 10px;
text-align: justify;
text-justify: newspaper
}
#content h2, #content h3, #content p {
padding:0 10px;
}
#empty {
background:#DEE0D4;
float:left;
width:500px;
height: 200px;
border: solid;
border-width: 2px;
border-color: #DEE0D4;
border-right-color: #FFF;
padding: 10px;
margin: 0 auto;
overflow: hidden;
}
#sidebar {
background:#96A3BE;
float:right;
width:220px;
min-height: 100%;
position: relative;
border: solid;
border-width: 0px;
border-color: #FFF;
text-align: left;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0px 10px 0 0;
}
#picbar{
width: 750px;
min-height: 140px;
margin: 0 auto;
margin-bottom: 0;
border-bottom:5px solid #003E5F;
}
#footer {
background: #003E5F;
margin: 0 auto;
border-style: solid;
border-width: 2px;
border-color: #000;
border-left-style: none;
border-top-style: solid;
padding: 10px;
width: 730px;
height: 15px;
list-style: inline;
text-align : center;
clear: both;
font-weight: bolder;
position: relative;
overflow: hidden;
}
#footer ul {
padding: 0px;
font : 9px Arial, Verdana, sans-serif, Helvetica;
color: #FFF;
font-weight: bolder;
text-align : center;
}
#footer li {
display : inline;
padding-left: 0px;
padding-right : 0px;
border: 0px;
border-right-color: #000;
}
#footer a:link, #right a:visited {
text-decoration : none;
color : #FFF;
}
#footer a:hover {
text-decoration : underline;
color : #FFF;
}
#footer a:active {
text-decoration : none;
color : #FFF;
}
#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #CCC;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
#nav h2{
float: right;
display: block;
padding: 6px 30px 6px 5px;
margin: 0 auto;
text-decoration: none;
font-weight: bold;
font-size: 90%;
color: #333;
}
#nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
#nav a {
float: left;
display: block;
padding: 6px 30px 6px 5px;
text-decoration: none;
font-weight: bold;
font-size: 90%;
color: #333;
background: #CCC url("http://summitpcg.com/images/nav_slant.gif") no-repeat top right;
}
#nav #nav-1 a {
padding-left: 20px;/*20*/
}
#nav a:hover {
color: #000;
}
ul#nav ul li {
position: relative;
list-style: none;
text-align: left;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
ul#nav ul li a {
min-width: 100px;
text-decoration: none;
color: #777;
/*background: #fff url(/SPCG/grad.gif) top repeat-x 20px;*/
background: #FFF;
padding: 5px;
border: 1px solid #ccc;
}
ul#nav li ul {
display: none;
list-style: none;
}
ul#nav li:hover > ul {
/*display: block;*/
position: absolute;
display: block;
width: 100%;
margin: 0;
padding-top: 28px;
}
/* ---- SIDE NAV ---- */
#navcontainer ul
{
margin-top: 20px;
margin-bottom: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li a
{
background: transparent url(http://summitpcg.com/images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", Trebuchet MS, Helvetica, sans-serif;
text-decoration: none;
font-weight: 600;
color: #FFF;
}
#navcontainer ul li a:hover
{
background: transparent url(http://summitpcg.com/images/list-on.gif) left center no-repeat;
color: 384252;
}
#navcontainer ul li a#current
{
background: transparent url(http://summitpcg.com/images/list-active.gif) left center no-repeat;
color: #25305C;
}
<div>
<ul id="nav">
<li id="nav-1"><a href="#">ABOUT US</a>
<ul>
<li><a href="#">Founder's Message</a></li>
<li><a href="#">Our Approach</a></li>
</ul>
</li>
<li><a href="#">CAPITAL</a>
<ul>
<li><a href="#">Our Mission</a></li>
<li><a href="#">The SPCG Advantage</a></li>
</ul>
</li>
<li><a href="#">CAPABILITIES</a>
<ul>
<li><a href="#">The Right Tools</a></li>
</ul>
</li>
<li><a href="#">FOCUS</a>
<ul>
<li><a href="#">Investors</a></li>
<li><a href="#">Private Financing</a></li>
<li><a href="#">Corporate Financing</a></li>
<li><a href="#">Business Revitalization</a></li>
</ul>
</li>
<li><a href="#">RESOURCES</a>
<ul>
<li><a href="#">Executive Partners</a></li>
<li><a href="#">Special Opportunities</a></li>
<li><a href="#">Glossary</a></li>
</ul>
</li>
<li><a href="#">CONTACT</a>
</li>
<h2>CAPITAL | REDEFINED.</h2>
</ul>
</div>