Menu inaccessible because of z-index

**Leeland** · 04-03-2010

To help me create template in Joomla, I would like to have a background image on which I superimpose a logo. Everything used to support a horizontal menu. To make visible elements, I used z-index, and it works. At least the elements are visible, but I can not click on the menu! So I tried to remove the z-index on the top_menu, and to put on another logo, but it does not help me! Is what I have done wrong? What should I do to access my menus?

I enclose below the part to the code:

HTML Code:

#top_menu {
		background-image: url(../images/top_menu.png);
		width: 1000px;
		line-height:70px; /* help to place the text in height */
		margin:0px;
		height:70px;	
		position: absolute;
		z-index: -1; 	}
	
	#top_menu li {
		display: inline;
		margin: 10px; 	}
	
	#logo img{
		float: right;
		/*z-index: 100;*/
		margin-right: 10px; 	}

**fellah** · 04-03-2010

There is nothing wrong whatever you have done but a z-index can never be negative. So no HTML code can help you. To explain you in a much better it is best to give us a URL where we can see the problem by ourselves. I hope you got my point.

**Leeland** · 04-03-2010

Thank you for your response. The relevant html code is here:

HTML Code:

<body>
<div id="header">
   <div id="top_menu"> 			
   <ul>
   <li><a href="1.html">Land Surveying</a></li>
   <li><a href="2.html">GIS</a></li>
   <li><a href="3.html">Agriculture</a></li>
   <li><a href="4.html">Geoteam</a></li>
   </ul>
   </div><!-- #top_menu -->	
 
   <div id="logo">
   <img alt="" src="./images/geoteam_logo_hvidt_3.PNG" alt="Geoteam logo" />
   </div><!-- #logo -->
</div><!-- #header -->

For the site URL, the site is currently not working and so there is no point to give the URL of the site.

**fellah** · 04-03-2010

There's a lot of things to see here. Some information for your menu in the header, I'll let you look the same for your left hand menu:

- In #top_menu, remove background-image position: absolute, width: 1000px and z-index: -1.
- In your #top_menu, add a float:left.
- In your #header, add a background-color: #7399C6 and an overflow:hidden.

**Leeland** · 04-03-2010

Thank you for your quick response. I have to control everything (html/css) and found nothing strange. But, if I remove the z-index:-1, top menu works (in firefox & chrome), although the left menu does not work forever. I think it's the last 2 errors, and it is mainly that of the top menu that bothers me the most!

**fellah** · 04-03-2010

Let me be clear: there is no "if"! We must remove the "-1" which is not a valid value for a z-index and disrupts the functioning of page:cf.

To the left menu, you just remove the position:relative on the footer. Better, you are including #left_column and #container of a third div where you put an overflow:hidden.