Problem with Navigation

[Ngo-Baheng]

Hello guys,

I really need help trying to sort out my navigation for a rollover list, it keeps appearing behind my container div. I’ve tried setting the z-index for the rollover list higher to that of the container but the problem still occurs so your help would be much appreciated. Here is the HTML code:

Code:

• Home
• Products & Services
  • Technical Support Services for Automation Control Systems
  • Turnkey Projects for Automation Control Systems
  • Industrial LED Display and Pick to Light Systems
  • Supply of Electrical Equipment and Electro-Mechanical Components
  • RFID Products and Solutions
  • Overhead Conveyor Systems
• Strategic Partners
• Vendor Approvals
• Downloads
• About us

Here is the CSS for the relevant sections:

Code:

#header #nav {
width: 960px;
margin: 24px auto;
font-size: 12px;
}

#header #nav ul {
list-style-type: none;
text-align: center;
}

#header #nav li {
float: left;
margin: 1px;
position: relative;
}

#header #nav li a {
display: block;
padding: 5px;
width: 144px;
height: 55px;
border: 1px solid #ffffff;
margin-bottom: 5px;
}

#header #nav li a:hover, #header #nav li a:active {
color: #FFFF00;
background-color: #93A3C9;
border: 1px solid #CCCCCC;
}

#header #nav li ul {
display: none;
position: absolute;
top: 60px;
}
#header #nav li:hover ul {
display: block;
}

And finally, here is a screenshot of the problem:

[img]http://img355.imageshack.us/img355/9412/help.jpg[/img]

If you need anymore code/info please let me know and i thank you in advance :)

[AshtonSanders]

Z-index is for absolute positioned elements.

Is your container div absolute positioned? That would cause it to be on top of your drop down.
Try giving your container div a z-index: -10

Ashton Sanders

[Ngo-Baheng]

Nope my container div doesnt have any position set in CSS, so i guess its relative?

Ok i tried giving the container a z-index of -10 and the problem still consists :(

Code:

#container {
width: 960px;
margin: 0 auto;
background-color: #ffffff;
z-index: -10;
position: relative;
}

[AshtonSanders]

Can you provide a link?

Or provide the HTML/CSS for the Container div?

Thanks

[Ngo-Baheng]

Its not online yet, but heres the html for the container:

Code:

Latest News

January 2009

Automation Support Services have signed an agreement with Louis Schierholz GmbH to be their representative in South East and North Asia. The agreement permits the ASS companies to work together with Schierholz in the areas of business development, the provision of maintenance services and the provision of replacement parts.

July 2008

Singapore Airport Terminal Services (SATS) Awards Cart Transport & Management System Upgrade Project.

SATS, the leading provider of integrated ground handling and airline catering services at Singapore Changi Airport, has chosen the partnership group of ASS Pte Ltd & Macdonald Humfrey (Automation) Ltd, following an open tender exercise, to upgrade the existing SATS Inflight Catering Centre 2 (SICC 2) Automated Cart Transport & Management System (CTMS).

Singapore Airport Terminal Services Limited (SATS) is the leading provider of integrated ground handling and airline catering services at Singapore Changi Airport. SATS’ network of ground handling and airline catering operations spans 18 overseas investments covering over 40 airports in the Asia Pacific region. SATS’ services include airfreight handling, airline catering, passenger services, baggage handling, ramp handling, aviation security, airline linen laundry and processed food manufacturing. SATS, a subsidiary of Singapore Airlines Limited (SIA), has been listed on the Singapore Exchange since May 2000.

The award by SATS to ASS Pte Ltd, with Macdonald Humfrey (Automation) Ltd acting as the main sub-contractor, follows a detailed tender process where the proposed solution of ASS Pte & MHA was eventually selected as the preferred technical solution.

The existing CTMS system has been in operation for some nine years, and is being updated to address obsolete hardware and redundant software issues as well as introduce new functionality to the system.

The system will adopt the latest Fault Tolerant server Hardware along with the advanced Wonderware System 3.0 Platform Software.

The system will be upgraded in a phased programme with completion planned for early 2009.

This project further enhances the long-term relationship between ASS Pte Ltd and MacDonald Humfrey (Automation) Ltd in the field of automation and technical solutions to industry.

June 2008

Automation Support Services Pte Ltd have relocated to their new offices in Singapore. The offices are strategically located to be able to provide timely responses to our clients in the event that our services are required on an urgent basis.

The location also enables ASS to offer its clients a workshop facility for light control panel assembly work and testing. The facility provides for additional area to store spare/replacement parts.

The offices are conveniently located at:

60 Kaki Bukit Place

#08-13 Eunos Techpark

Singapore 415979

Tel : +65 6844 6223

Fax : +65 6844 0337

E-mail : [email protected]

Web : http://www.assmsb.com

The CSS is in my previous post :)

[Ngo-Baheng]

Is there anyone that can solve my problem as to why my rollover list appears behind my container div?

[apostrophe]

Quote:

Is there anyone that can solve my problem as to why my rollover list appears behind my container div?

Not without a link.

[Ngo-Baheng]

Hi guys,

I’ve put the page online at: http://www.ngobaheng.co.nr/ .I hope you’re now able to help.

Thanks in advance.

[apostrophe]

Does it work if you put it on a real page and not in a frame?

[AshtonSanders]

Hi man,

Why do you have position:absolute and position: relative all over the place? I don’t see any reason why you’d need those; It’s a very simple design.

Try remove all "position:absolute" and "position:relative" as they aren’t doing anything useful.
I’d also recommend reading about the CSS Position Property: http://www.w3schools.com/Css/pr_class_position.asp

"apostrophe" wrote:

Does it work if you put it on a real page and not in a frame?

Here’s the link to the page not in an iframe:
http://ngobaheng.webng.com/test/index.html

[apostrophe]

Give the header div a height and get rid of the overflow.

[Ngo-Baheng]

Hi guys,

Thanks alot for all your help the problem is now solved, it was the overflow: hidden on the header div tag :)

[Author]

Posts