Hi,
Ok here’s a re-jig of the menu which is now in the flow and not absolutely positioned.
The menu heights have been sorted and you don’t need the hack for IE and the menu lines up the same in all browsers.
I think I’ve done the rollovers as you wanted as they seem logical to me and they all highlight properly. I removed the third level code as it was confusing things.
The menu uses the margin-left technique instead of display:none.
I copied all the three css files into the head for testing so you will need ot move them back to their original places. I also used absolute path names for testing but you can change them back to relative (use a search and replace).
If you just copy this html and save it locally, you can then view it straight away ( as long as you are online) and you can see how the menu looks before you try to apply the changes to your own site.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vertical Systems Analysis - Home</title>
<base href="http://www.vsaconsulting.com/testsite/" />
<meta name="Generator" content="Vertical Systems Analysis - All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="elevator consulting, elevator engineering, elevator design, elevator modernization, vertical systems analysis, vertical transportation consulting, elevator consultants, elevator, elevators, vertical systems, elevator maintenance, elevator inspection, elevator modernization, elevator lift, consultants, consulting, vertical transportation consultants, vertical transportation, vertical and horizontal transportation, global consulting, elevator equipment maintenance, consultants, consulting, elevator design, modernization, VSA" />
<meta name="description" content="VSA (Vertical Systems Analysis) is an established elevator design and consulting firm, and has provided design and engineering expertise to numerous clients since its inception." />
<!--
<link rel="stylesheet" type="text/css" media="screen" href=
"http://www.vsaconsulting.com/testsite/stylesheet.php?cssid=52&mediatype=screen" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.vsaconsulting.com/testsite/stylesheet.php?cssid=31&mediatype=screen" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.vsaconsulting.com/testsite/stylesheet.php?cssid=51&mediatype=screen" />
-->
<link rel="start" title="Home Page, shortcut key=1" href="http://www.vsaconsulting.com/testsite/" />
<link rel="next" title="Mission Statement & Philosophy" href="http://www.vsaconsulting.com/testsite/home/mission_statement.html" />
<style>
/* stylesheet.php - first one*/
/* Start of CMSMS style sheet 'VSA' */
body {
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 11px;
margin: 0px 0 0 0;
padding: 0;
background: url('http://www.vsaconsulting.com/testsite/uploads/images/background.gif') repeat;
background-color: #807C7C;
color: #000000;
}
.main {
width: 760px;
margin: 39px auto;
text-align: left;
border: 1px solid #807C7C;
background-color: #FFFFFF;
color: #000000;
}
.top {
border: 1px solid #807C7C;
margin: 5px 5px 1px;
height: 114px;
width: 750px;
}
.search-input {
float:right;
margin:0px 5px 0px 5px;
}
.search-button {
float:right;
padding:1px 5px 4px 5px;
height:20px;
width:55px;
border:1px solid #807C7C;
background-image:url(http://www.vsaconsulting.com/testsite/uploads/images/s_bg.jpg);
background-repeat:repeat-x;
}
.right {
float: left;
width: 520px;
font-size: 12px;
margin: 0 0 0 5px;
padding: 0 10px;
text-align: justify;
}
.left_column {
float: left;
width: 150px;
border-right: 1px solid #807C7C;
padding: 0px 10px 0px 5px;
margin: 5px 5px 5px 5px;
}
.slides {
float: left;
width: 150px;
height:230px;
position:relative;
}
.slides img {
width: 150px;
height: 220px;
position:absolute;
top:0;
left:0;
}
.news {
float: left;
width: 150px;
text-align: justify;
margin: 5px 0px 0px 5px;
}
.bread {
float: right;
padding-right: 5px;
font-weight: bold;
font-size: 10px;
}
#header form {
margin:0;
}
#header {
width: 760px;
margin: 5px 0 1px;
padding: 0;
background: #ffffff;
text-align: left;
position:relative;
z-index:9;
}
a {
color: #000000;
background-color: inherit;
}
a:hover {
text-decoration: none;
}
div#header h1 a {
/* you can set your own image here */
background: url('http://www.vsaconsulting.com/testsite/uploads/images/vsalogo.JPG') no-repeat 10px;
/* this will make the "a" link a solid shape */
display: block;
/* adjust according your image size */
height: 80px;
/* this hides the text */
text-indent: -999em;
/* old firefox would have shown underline for the link, this explicitly hides it */
text-decoration: none;
}
div#header h1 {
margin: 0;
padding: 0;
/*these keep IE6 from pushing the header to more than the set size*/
line-height: 0;
font-size: 0;
/* this will keep IE6 from flickering on hover */
background: url('http://www.vsaconsulting.com/testsite/uploads/images/vsalogo.JPG') no-repeat 10px;
}
h1 {
padding: 1px 0 0 5px;
margin: 0;
font-size: 28px;
font-weight: normal;
color: #008080;
background-color: inherit;
font-family: "Trebuchet MS", verdana, arial, sans-serif;
}
h2 {
color: #008080;
background-color: inherit;
font-size: 12px;
margin: 1px 12px 5px 11px;
padding: 0;
}
h3 {
color: #666666;
background-color: inherit;
font-size: 14px;
margin: 0px 0px 5px 0px;
padding: 0;
}
h4 {
color: #008080;
background-color: inherit;
font-size: 11px;
margin: 1px 0px 10px 0;
padding: 0;
}
.title {
text-align: left;
padding: 5px 0px 0px 2px;
}
.title p {
margin: 5px 0 0 23px;
padding: 0;
}
#footer {
position: relative;
}
.footer {
font-size: 11px;
background-color: #008080;
border: 1px solid #000000;
margin: 5px 3px 5px 5px;
padding: 7px 5px;
height: 15px;
text-align: center;
}
.fix {
clear: left;
height: 1px;
}
.content {
position: relative;
overflow: auto;
width: 750px;
margin:0 5px 0 5px;
border: 1px solid #807C7C;
}
.cp1 {
float: left;
}
/* End of 'VSA' */
/* end stylesheet one */
/* stylesheet.php - second one*/
/* Start of CMSMS style sheet 'Accessibility and cross-browser tools' */
/* accessibility */
/* menu links accesskeys */
span.accesskey {
text-decoration: none;
}
/* accessibility divs are hidden by default, text, screenreaders and such will show these */
.accessibility, hr {
/* position set so the rest can be set out side of visual browser viewport */
position: absolute;
/* takes it out top side */
top: -999em;
/* takes it out left side */
left: -999em;
}
/* definition tags are also hidden, these are also used for accessibility menu links */
dfn {
position: absolute;
left: -1000px;
top: -1000px;
width: 0;
height: 0;
overflow: hidden;
display: inline;
}
/* end accessibility */
/* wiki style external links */
/* external links will have "(external link)" text added, lets hide it */
a.external span {
position: absolute;
left: -5000px;
width: 4000px;
}
a.external {
/* make some room for the image, css shorthand rules, read: first top padding 0 then right padding 12px then bottom then right */
padding: 0 12px 0 0;
}
/* colors for external links */
a.external:link {
color: #18507C;
/* background image for the link to show wiki style arrow */
background: url(images/cms/external.gif) no-repeat 100% -100px;
}
a.external:visited {
color: #18507C;
/* a different color can be used for visited external links */
/* Set the last 0 to -100px to use that part of the external.gif image for different color for active links external.gif is actually 300px tall, we can use different positions of the image to simulate rollover image changes.*/
background: url(images/cms/external.gif) no-repeat 100% -100px;
}
a.external:hover {
color: #18507C;
/* Set the last 0 to -200px to use that part of the external.gif image for different color on hover */
background: url(images/cms/external.gif) no-repeat 100% 0;
background-color: inherit;
}
/* end wiki style external links */
/* clearing */
/* clearfix is a hack for divs that hold floated elements. it will force the holding div to span all the way down to last floated item. We strongly recommend against using this as it is a hack and might not render correctly but it is included here for convenience. Do not edit if you dont know what you are doing*/
/* clearing technique */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \\*/
.clearfix {display: block;}
/* End hide */
.clear {
height: 0;
clear: both;
width: 90%;
visibility: hidden;
}
#main .clear {
height: 0;
clear: right;
width: 90%;
visibility: hidden;
}
* html .clear {
/* Hides from IE-mac \\*/
height: 1%;
clear: right;
width: 90%;/* End hide from IE-mac */
}
/* end clearing */
/* End of 'Accessibility and cross-browser tools' */
/* end stylesheet two */
/* stylesheet.php - third one*/
/* Start of CMSMS style sheet 'VSA: CSSMenu - Horizontal' */
/* by Alexander Endresen and mark and Nuno */
.clearb {
/* needed for some browsers */
clear: both;
}
#menuwrapper {
position:relative;
width: 752px;
height: 43px;
margin: 0 0 0 5px;
background: #008080;
padding: 0;
z-index: 1000;
}
ul#primary-nav, ul#primary-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#primary-nav {
padding-left: 10px;
height:43px;
}
ul#primary-nav li {
float: left;
position: relative;
height:43px;
line-height:43px;
}
ul#primary-nav li a {
font-size: 1em;
font-weight: bold;
color: #000;
padding:0 15px 0;
float:left;
text-decoration: none;
height:43px;
line-height:43px;
}
/* set the "a" link look here */
ul#primary-nav li a:hover {
color: #fff;
}
ul#primary-nav li a.menuactive {
color: #fff;
/* bold to set it off from non active */
font-weight: bold;
/* set your image here */
}
ul#primary-nav li a.menuactive:hover {
color: #000;
/* keep it the same */
font-weight: bold;
}
/* secondary level */
ul#primary-nav ul {
position: absolute;
top:100%;
left:0;
margin-left:-999em;
border: 1px solid #000;
background: #008080;
z-index: 999;
border-bottom: 1px solid #374B51;
opacity: 0.95;/* CSS 3 */
width: auto;
height: auto;
}
#primary-nav li li {
width: 220px;
float: left;
clear:left;
height:auto;
line-height:normal;
}
#primary-nav li li a{
float:left;
width:202px;
height:auto;
line-height:normal;
text-align: left;
position: relative;
color: #000;
font-weight: normal;
padding: 6px 3px 6px 15px;
}
/* Styling the appearance of menu items on hover */
#primary-nav li:hover{
/* set your image here, dark grey image */
background: url(http://www.vsaconsulting.com/testsite/uploads/ngrey/darknav.png) repeat-x left center;
visibility:visible;
}
#primary-nav li:hover a{color:#fff}
#primary-nav li:hover li a{color:#000}
#primary-nav li li:hover a{color:#fff}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
margin-left:-999em;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
margin-left:0
}
/* End of 'VSA: CSSMenu - Horizontal' */
/* end stylesheet three */
</style>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.vsaconsulting.com/testsite/js/jquery.cycle.lite.1.0.js"></script>
<script type="text/javascript">
$(function()
{
$("#slideshow").cycle();
});
</script>
<!--[if lte IE 6]>
<script type="text/javascript" src="http://www.vsaconsulting.com/testsite/modules/MenuManager/CSSMenu.js"></script>
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
</style>
<![endif]-->
<ul class="accessibility">
<li><a href="/testsite/#menu_vert" title="Skip to navigation" accesskey="n">Skip to navigation</a></li>
<li><a href="/testsite/#main" title="Skip to content" accesskey="s">Skip to content</a></li>
</ul>
<hr class="accessibility" />
<!-- TinyMCE Session vars empty -->
</head>
<body>
<div id="pagewrapper">
<div class="main">
<div id="header">
<div class="top">
<div class="title">
<form id="cntnt01moduleform_1" method="get" action="http://www.vsaconsulting.com/testsite/">
<div class="hidden">
<input type="hidden" name="mact" value="Search,cntnt01,dosearch,0" />
<input type="hidden" name="cntnt01returnid" value="15" />
</div>
<input type="text" class="search-input" id="cntnt01searchinput" name="cntnt01searchinput" size="15" maxlength="50" value="Enter Search..." onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;"/>
<input class="search-button" name="submit" value="Submit" type="submit" />
</form>
<h1><a href="http://www.vsaconsulting.com/testsite/" title="Home Page, shortcut key=1" >Home</a></h1>
<h2>Elevator Engineering, Design, Modernization and Consulting</h2>
</div>
</div>
<div id="menuwrapper" class="clearfix">
<ul id="primary-nav">
<li class="menuactive menuparent"><a class="menuactive menuparent"
href="http://www.vsaconsulting.com/testsite/" accesskey="1" title="Home Page, shortcut key=1"><dfn>1: </dfn><span>Home</span></a>
<ul>
<li><a
href="http://www.vsaconsulting.com/testsite/home/mission_statement.html" ><dfn>1.1: </dfn><span>Mission Statement & Philosophy</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/home/services.html" ><dfn>1.2: </dfn><span>Services</span></a> </li>
</ul>
</li>
<li><a
href="http://www.vsaconsulting.com/testsite/design_approach.html" ><dfn>2: </dfn><span>Design Approach</span></a> </li>
<li class="menuparent"><a class="menuparent"
href="http://www.vsaconsulting.com/testsite/management_team.html" ><dfn>3: </dfn><span>Management Team</span></a>
<ul>
<li><a
href="http://www.vsaconsulting.com/testsite/management_team/management-team.html" ><dfn>3.1: </dfn><span>Management Team</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/management_team/principals.html" ><dfn>3.2: </dfn><span>Principals</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/management_team/senior_staff.html" ><dfn>3.3: </dfn><span>Senior Staff</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/management_team/office_staff.html" ><dfn>3.4: </dfn><span>Office Staff</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/management_team/testing_division.html" ><dfn>3.5: </dfn><span>Testing Division</span></a> </li>
</ul>
</li>
<li class="menuparent"><a class="menuparent"
href="http://www.vsaconsulting.com/testsite/portfolio.html" ><dfn>4: </dfn><span>Portfolio</span></a>
<ul>
<li><a
href="http://www.vsaconsulting.com/testsite/portfolio/portfolio-2.html" ><dfn>4.1: </dfn><span>Portfolio</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/portfolio/commercial.html" ><dfn>4.2: </dfn><span>Commercial</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/portfolio/residential.html" ><dfn>4.3: </dfn><span>Residential</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/portfolio/retail.html" ><dfn>4.4: </dfn><span>Retail</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/portfolio/hotel.html" ><dfn>4.5: </dfn><span>Hotel</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/portfolio/healthcare.html" ><dfn>4.6: </dfn><span>Healthcare</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/portfolio/educational.html" ><dfn>4.7: </dfn><span>Educational</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/portfolio/government.html" ><dfn>4.8: </dfn><span>Government</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/portfolio/housing_authority.html" ><dfn>4.9: </dfn><span>Housing Authority</span></a> </li>
</ul>
</li>
<li class="menuparent"><a class="menuparent"
href="http://www.vsaconsulting.com/testsite/clients.html" ><dfn>5: </dfn><span>Clients</span></a>
<ul>
<li><a
href="http://www.vsaconsulting.com/testsite/clients/clients-2.html" ><dfn>5.1: </dfn><span>Clients</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/clients/architects.html" ><dfn>5.2: </dfn><span>Architects</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/clients/building_owners.html" ><dfn>5.3: </dfn><span>Building Owners</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/clients/building_management.html" ><dfn>5.4: </dfn><span>Building Management</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/clients/general_contractors.html" ><dfn>5.5: </dfn><span>General Contractors</span></a> </li>
<li><a
href="http://www.vsaconsulting.com/testsite/clients/engineers.html" ><dfn>5.6: </dfn><span>Engineers</span></a> </li>
</ul>
</li>
<li><a
href="http://www.vsaconsulting.com/testsite/contact.html" ><dfn>6: </dfn><span>Contact</span></a> </li>
</ul>
</div>
</div>
<div class="content">
<div id="leftcolumn" class="left_column">
<div id="slideshow" class="slides"> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_1.jpg" alt="Flatiron Building" title="The Flatiron Building - 175 Fifth Avenue, NYC" /> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_2.jpg" /> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_3.jpg" /> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_4.jpg" /> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_5.jpg" /> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_6.jpg" /> </div>
<div class="news">
<h4>COMPANY NEWS</h4>
<!-- Displaying News Module -->
<!-- News Categories: '' -->
<!-- Start News Display Template -->
<div class="NewsSummary">
<div class="NewsSummaryPostdate"> <b>Feb 10, 2010</b> </div>
<div class="NewsSummaryLink"> <a href="http://www.vsaconsulting.com/testsite/news/1/15/VSA-Announces-New-Website.html" title="VSA Announces New Website">VSA Announces New Website</a> </div>
<div class="NewsSummarySummary"> Vertical Systems Analysis has announced that they have gone live with their new website effective March 1st, 2010. </div>
<div class="NewsSummaryMorelink"> [<a href="http://www.vsaconsulting.com/testsite/news/1/15/VSA-Announces-New-Website.html">More</a>] </div>
<br />
</div>
<div class="NewsSummary">
<div class="NewsSummaryPostdate"> <b>Feb 1, 2010</b> </div>
<div class="NewsSummaryLink"> <a href="http://www.vsaconsulting.com/testsite/news/3/15/VSA-Announces-New-Vice-President.html" title="VSA Announces New Vice President">VSA Announces New Vice President</a> </div>
<div class="NewsSummarySummary"> VSA is pleased to annouce their new Vice President, Anthony A. Giordano. </div>
<div class="NewsSummaryMorelink"> [<a href="http://www.vsaconsulting.com/testsite/news/3/15/VSA-Announces-New-Vice-President.html">More</a>] </div>
<br />
</div>
<!-- End News Display Template -->
</div>
</div>
<div class="bread"><span class="lastitem">Home</span></div>
<div class="right">
<h3>Vertical Systems Analysis</h3>
<h4>"Let's Take you to the Top"</h4>
<p><strong>Vertical Systems Analysis</strong>, Inc. is an established consulting firm in the United States of America and has provided design and engineering expertise to numerous clients since its inception. Over the years, our company has evolved with the changing times and the needs of our clientele into a top notch engineering firm with state-of-the-art design and reporting methods and equipment. <br />
<br />
Our design and consulting experience has run the entire gamut from providing engineering and design services for complex elevator/escalator systems (New York Methodist Hospital) and performing elevator surveys and audits of prestigious and Landmarked properties such as the Flat Iron Building (175 Fifth Avenue, New York, NY), apartment Cooperatives and Condominiums, to public transit structures. <br />
<br />
<strong><span style="text-decoration: underline;">Company History</span></strong></p>
For over twenty-four (24) years, Vertical Systems Analysis (VSA) has been providing vertical transportation consulting services to many of the leading professionals, in all sectors of this industry for the entire tri-state area.
<p>Conveniently located in mid-town Manhattan, our team of professional staff including two (2) working Principals, fifteen (15) field personnel and licensed inspectors, supported by ten (10) administrative employees are available on a moment’s notice, to address any situation relative to our Client’s needs.</p>
</div>
</div>
<div id="footer">
<div class="footer"><a href="../undefined/testsite" target="_blank"><strong>Vertical Systems Analysis</strong></a> © 1985-2010 | 322 Eight Avenue, Suite 201 | New York, NY 10001 | <strong>212-989-5525</strong></div>
</div>
</div>
</div>
</body>
</html>
I checked ie7, ie8, firefox and Safari and they all seem to be the same. (I didn’t look at ie6 though).
Hope you can manage to work it all out. 