CSS - Creating Horizontal Drop-down With Dynamic Images

I'm trying to get my horizontal navigation to work for a PTA page I'm creating. New to CSS and I think I've got a bit of the gist of it... but I'm really struggling with this. I've mostly "found" the coding I needed and then modified it to suit my needs.

As a designer, though, I still want it to look the way I want it to and I'm not quite able to accomplish that.

Basically, I would like a drop down menu added to the navigation I've created here - lwptsa . org/newsite/

This is the solution I found - lwptsa . org/newsite/dropdown . html

But I am unable to get the dark blue to continue to the end of the container.

** ACK, not allowed to post images. You can find the image I'm referring to he lwptsa . org/newsite/images/navigation . jpg

I'd like to fix the left margin spacing and it's coloring (A), making the lines between the buttons/blocks white (B) and having the blue flush with the white containers above and below (A). I'd also like to keep the top lines between the drop-down menu (C) but remove it from the main menu/navigation (B).

Hopefully this makes sense. My style sheets a

No drop-down menu, but working spacing and white separating lines (id - navigation):
lwptsa . org/newsite/
Code:

body
{
	margin: 20px;
	padding: 0;
	font: 100%/1.3 arial;
	font-size: medium;
	color: #000;
	background: #ccc;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 1em;
	line-height: 1.1;
}

h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
	font: 80%/1.3 helvetica, arial, sans-serif;
 }
img { border: none; }

a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }

a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }

a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }

#container
{
	margin: 0 auto;
	width: 1024px;
	background: #fff;
}

#container table
{
	font: 80%/1.3 helvetica, arial, sans-serif;
}

#header
{
	font-style:italic;
	font-size:small;
	color: #00693e;
	background: #fff;
	text-align: center;
	height: 115px;
	padding: 20px 20px 20px 30px;
}

#navigation
{
	font-size:small;
	float: left;
	width: 1024px;
	background: #002664;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation ul ul
{
position: absolute;
background: #d1d5da;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */

}

#navigation li a
{
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { color: #a3d869; }

#content-container
{
	float: left;
	width: 1024px;
	background: #fff;
}

#content
{
	height:	inherit;
	clear: left;
	float: left;
	width: 590px;
	padding: 0 20px 0 0;
	margin: 20px 0 20px 30px;
	display: inline;
	border-right: 1px solid #00693e;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 340px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}

#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }

#footer
{
	font-size: x-small;
	clear: both;
	color: #fff;
	background: #002664;
	text-align: center;
	padding: 5px;
	height: 1%;
}

#translator
{
	text-align: center;
	margin: auto;
	position: absolute;
}

Drop-down menu, but issue with the blue not continuing to the end and weird issues with separating lines and margins (id - menu):
lwptsa . org/newsite/dropdown . html
Code:

body
{
	margin: 20px;
	padding: 0;
	font: 100%/1.3 arial;
	font-size: medium;
	color: #000;
	background: #ccc;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 1em;
	line-height: 1.1;
}

h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
	font: 80%/1.3 helvetica, arial, sans-serif;
 }
img { border: none; }

a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }

a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }

a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }

#container
{
	margin: 0 auto;
	width: 1024px;
	background: #fff;
}

#container table
{
	font: 80%/1.3 helvetica, arial, sans-serif;
}

#header
{
	font-style:italic;
	font-size:small;
	color: #00693e;
	background: #fff;
	text-align: center;
	height: 115px;
	padding: 20px 20px 20px 30px;
}

#menu ul
{
  font-family: Arial, Verdana;
  font-size:small;
  margin: 0;
  padding: 0;
  list-style: none;}

#menu ul li
{
  display: block;
  position:	relative;
  float: left;}

#menu li ul { display: none; }

#menu li a
{
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #002664;
  margin-left: 1px;
  white-space: nowrap;}

#menu ul li a:hover {   background: #00693e; }

#menu li:hover ul {
  display: block;
  position: absolute;
}

#menu li:hover li {
  float: none;
  font-size: 11px;
}

#menu li:hover a { background: #00693e; }
#menu li:hover li a:hover { color: #fff;background: #008d53; }

#content-container
{
	float: left;
	width: 1024px;
	background: #fff;
}

#content
{
	height:	inherit;
	clear: left;
	float: left;
	width: 590px;
	padding: 0 20px 0 0;
	margin: 20px 0 20px 30px;
	display: inline;
	border-right: 1px solid #00693e;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 340px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}

#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }

#footer
{
	font-size: x-small;
	clear: both;
	color: #fff;
	background: #002664;
	text-align: center;
	padding: 5px;
	height: 1%;
}

#translator
{
	text-align: center;
	margin: auto;
	position: absolute;
}

Any and all help welcome. I'm trying to redesign the look and information of the PTA's website.

a.

Hello:

I inherited a site which was designed by an SEO firm. They have a 2 level horizontal drop down menu which isn't working in Internet Explorer 6.

The website URL is http://www.chrisspencerhomes.com.
When you hover over the links Communities, Home Plans, Available Homes and Gallery; the drop down menus do not appear in IE6. The website works great in Firefox and IE7.

I attached the CSS file to this post. Can someone help me fix the CSS code so it will work on IE6?

Thank you for all your time and help.

Hi there,
I have not done any html/CSS in a LONG time and have just got back into it.
I am having some problems with a drop down, where, when the sub menu is hovered over, it will not go away again until the mouse is moved either up above the menu bar or off the browser page. I would like the sub menu to be hidden when the mouse is off the sub menu item.

An example is here (oops, I can't post a URL)
Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-image: url(images/carpet.gif);
	width:100%;
	margin: 0px;
}

#wrapper {
	position: relative;
	margin: auto;
	width:840px;
	top: 20px;
	height: 920px;
}


#index3-03_ {
	position:absolute;
	left:5px;
	top:45px;
	width:840px;
	height:263px;
	background-image: url(images/thinslice.png);
	background-repeat: no-repeat;
	z-index: 2;
	background-position: -66px -142px;
}

#navbar {
	position: absolute;
	top: 31px;
	right: 0px;
	margin: 0;
	padding: 0;
	width: 780px;
	left: 38px;
	height: 37px;
}
#navbar li {
	list-style: none;
	float: left;
	padding-left: 20px;
	font-size: 14px;
}
#navbar li a {
   
   display: block;
	text-decoration: none;
	list-style-type: none;
	list-style: unordered;
	padding-top: 8px;
	padding-right: 16px;
	padding-bottom: 8px;
	padding-left: 5px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-decoration: none;
	color: #363795;
	text-align: center;
   }
#navbar li a:hover {
	color: #B00D46;
}

#navbar li ul {
   display: none;  }

#navbar li:hover ul, #navbar li.hover ul {
	position:absolute;
	display: block;
	left:-42px;
	top:-1px;
	width:840px;
	margin: 0;
	background-repeat: no-repeat;
	float: left;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	z-index: 5;
	clear: none;
	background-image: url(images/fatslice.png);
	background-position: -62px -281px;
	height: 500px;
}

#navbar li:hover li, #navbar li.hover li {
	float: left;
	padding-left: 25px;
	padding-bottom: 25px;
}
#navbar li:hover li a, #navbar li.hover li a {
	color: #363795;
	position: relative;
	left: 125px;
	top: 25px;
}
#navbar li li a:hover {
	color: #B00D46;
	text-align: left;
	position: relative;
	left: 125px;
	top: 25px;
}


#foobar1 {
	position: absolute;
	left: 62px;
	top: 1px;
	clear: both;
}

#foobar2 {
	position: absolute;
	left: 149px;
	top: 1px;
	clear: both;
}
#foobar3 {
	position: absolute;
	left: 32px;
	top: 1px;
	clear: both;
}

-->
</style>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>


</head>

<body>


    <div id="index3-03_">
      <ul id="navbar"><li><a href="index.html" target="_self">HOME</a></li>
        <li><a href="usage.html" target="_self">THIS IS BROKEN</a>
          <ul>
            <span id="foobar1"><a href="index.html" target="_self">HOME</a></span>
            <span id="foobar2"><a href="usage.html" target="_self">THIS IS BROKEN</a></span>
            <span id="foobar3"><a href="faq.html" target="_self">FAQ's</a></span>
            <li><a href="parents.html" target="_self">PARENTS</a></li>
            
          </ul>
        </li>
        <li> <a href="faq.html" target="_self">FAQ's</a></li>
      </ul>
    </div>
</body>
</html>

any help would be much appreciated

Can somebody tell me if this is possible?

I have a horizontal menu and I'm using images. I'm using javascript for the drop down menu etc. The menu is an include so it looks the same on all the pages. What I want to do is when I'm on say "Contact" the rollover color (this is an image) displays the "Contact" hover image, and the same with the other pages.

So what needs to happen is CSS needs to override the button with the hover image.

Is it possible to put css in every page that tells it to display the needed hover image when on that page?

Hi all!

I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to.
The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up

You can check out the site at:
cleopatra.gebodesign.no

The files are at:
gebodesign.no/cleopatra/menu.php
gebodesign.no/cleopatra/stylesheet.css

Thanks for any input

Please help me how to center Ultimate Horizontal Drop-Down Menu Demo on DIV

ultimate.horizontal.html
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ultimate Horizontal Drop-Down Menu Demo</title>
<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

</head>
<body>

<h1>Ultimate Horizontal Drop-Down Menu Demo</h1>

<div id="catmenu">
<ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="./">Home</a></li>
	<li><span class="dir">About Us</span>
		<ul>
			<li><a href="./">History</a></li>
			<li><a href="./">Our Vision</a></li>
			<li><span class="dir">The Team</span>
				<ul>
					<li><a href="./">Brigita</a></li>
					<li><a href="./">John</a></li>
					<li><a href="./">Michael</a></li>
					<li><a href="./">Peter</a></li>
					<li><a href="./">Sarah</a></li>
				</ul>
			</li>
			<li><a href="./">Clients</a></li>
			<li><a href="./">Testimonials</a></li>
			<li><a href="./">Press</a></li>
			<li><a href="./">FAQs</a></li>
		</ul>
	</li>
	<li><span class="dir">Services</span>
		<ul>
			<li><a href="./">Product Development</a></li>
			<li><a href="./">Delivery</a></li>
			<li><a href="./">Shop Online</a></li>
			<li><a href="./">Support</a></li>
			<li><a href="./">Training & Consulting</a></li>
		</ul>
	</li>
	<li><span class="dir">Products</span>
		<ul>
			<li><a href="./" class="dir">New</a>
				<ul>
					<li><a href="./">Corporate Use</a></li>
					<li><a href="./">Private Use</a></li>
				</ul>
			</li>
			<li><a href="./" class="dir">Used</a>
				<ul>
					<li><a href="./">Corporate Use</a></li>
					<li><a href="./">Private Use</a></li>
				</ul>
			</li>
			<li><a href="./">Featured</a></li>
			<li><a href="./">Top Rated</a></li>
			<li><a href="./">Prices</a></li>
		</ul>
	</li>
	<li><a href="./">Gallery</a></li>
	<li><a href="./">Events</a></li>
	<li><a href="./">Careers</a></li>
	<li><a href="./" class="dir">Contact Us</a>
		<ul>
			<li><a href="./">Enquiry Form</a></li>
			<li><a href="./">Map & Driving Directions</a></li>
			<li><a href="./">Your Feedback</a></li>
		</ul>
	</li>
</ul>
</div>

</body>
</html>

css/dropdown/dropdown.css
Code:

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 display: block;
 /*margin: 0;
 padding: 0;*/
}

ul.dropdown {
 position: inherit;
 z-index: 597;
/* float: left;*/
}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
 text-align:left;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
/* left: 0;*/
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

css/dropdown/themes/default/default.ultimate.css
Code:

#catmenu{
 text-align:center;
 width:100%;
 background:#f6f6f6;
 border-style: solid;
 border-width: 1px 1px 1px 0;
 border-color: #fff #d9d9d9 #d9d9d9;
 height: 34px;
 top: 0;
 right: 0;
 margin: 0;
 padding: 0;
}



ul.dropdown {
 font-weight: bold;
}

	ul.dropdown li {
	 padding: 7px 10px;
	 border-style: solid;
	 border-width: 1px 1px 1px 0;
	 border-color: #fff #d9d9d9 #d9d9d9;
	 background-color: #f6f6f6;
	 color: #000;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 background-color: #eee;
	 color: #000;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #000; text-decoration: none; }
	ul.dropdown a:hover		{ color: #000; }
	ul.dropdown a:active	{ color: #ffa500; }


	/* -- level mark -- */

	ul.dropdown ul {
	 width: 150px;
	 margin-top: 1px;
	}

		ul.dropdown ul li {
		 font-weight: normal;
		}



/*-------------------------------------------------/
 * @section		Support Class `dir`
 * @level sep	ul, .class
 */


ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown-upward *.dir {
 background-image: url(images/nav-arrow-top.png);
}

ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(images/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-image: url(images/nav-arrow-left.png);
 background-position: 0 50%;
}

css/dropdown/themes/default/default.css
Code:

#catmenu{
 text-align:center;
 width:100%;
 background:#f6f6f6;
 border-style: solid;
 border-width: 1px 1px 1px 0;
 border-color: #fff #d9d9d9 #d9d9d9;
 height: 34px;
 top: 0;
 right: 0;
 margin: 0;
 padding: 0;
}



ul.dropdown {
 font-weight: bold;
}

	ul.dropdown li {
	 padding: 7px 10px;
	 border-style: solid;
	 border-width: 1px 1px 1px 0;
	 border-color: #fff #d9d9d9 #d9d9d9;
	 background-color: #f6f6f6;
	 color: #000;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 background-color: #eee;
	 color: #000;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #000; text-decoration: none; }
	ul.dropdown a:hover		{ color: #000; }
	ul.dropdown a:active	{ color: #ffa500; }


	/* -- level mark -- */

	ul.dropdown ul {
	 width: 150px;
	 margin-top: 1px;
	}

		ul.dropdown ul li {
		 font-weight: normal;
		}



/*-------------------------------------------------/
 * @section		Support Class `dir`
 * @level sep	ul, .class
 */


ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown-upward *.dir {
 background-image: url(images/nav-arrow-top.png);
}

ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(images/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-image: url(images/nav-arrow-left.png);
 background-position: 0 50%;
}

Thank you.

This problem has been driving me crazy. Long story short, this is what it looks like in Firefox 3. This is the correct way it should look. (ff.jpg)

This is the way it looks in both IEs (ie.jpg)

The entire third <li> item wraps correctly in firefox, but in ie, the word within the <li> wrap, but not the entire <li> element.

Here is the html:
Code:

<ul class="tabNavSecondary">
<li><a href="#preventionSub1">Prevention</a>|</li>
<li><a href="#preventionSub2">xxxxxx</a>|</li>
<li><a href="#preventionSub3">xxxxx</a>|</li>
<li><a href="#preventionSub4">xxxx</a>|</li>
<li><a href="#preventionSub5">xxxx</a>|</li>
<li><a href="#preventionSub6">xxx</a></li>
</ul>

CSS:
Code:

.tabNavSecondary{
	float:left;
	margin:6px 0 15px -5px;
}
.tabNavSecondary li{
	background:none;
	display:block;
	float:left;
	margin:0;
	padding:0;
}

.tabNavSecondary li a,
.tabNavSecondary li a:link{
	float:left;
	margin:0 5px;
	color:#003399;
}

Any thoughts? I've tried for about an hour with all sorts of different styles.

I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

I would really like your help on this been trying to do it for weeks now!!

Cheers

Is it possible without any client side scripting to load in backgrounda.gif for 800x600 resolution and backgroundb.gif for any other resolution?

Server side scripting is ok but I was hoping for a CSS method although I am pretty sure it's not possible.

i have a basic html page which includes a number of hyperlinks using jpeg images... essentially <img> tags wrappped in <a> tags.

i want to create a rollover effect with these links so that when a link is highlighted (mouseover) the jpeg image changes to another seperate jpeg impage.

is it possible to do this with html/css and if so how can i do this?

i have read about a method of doing this which combines both the original image (before mouseover) and the mouseover image into one single jpeg and changing the image's x-coordinate using css so that there is no preload/image flicker issues when the link is clicked on, but i'm not sure exactly how to code this.

any help is appreciated.

How do create text that has a background AND foreground image? The effect I am after is looking through one image (I already have a transparent one that should work) to see text which is on top of a background image.

I figure that these would come into play...but I have not been able to make the right combination of divs, etc., to make this happen.

.back {
background: url(backsrc.gif) bottom left repeat-x;
}

.fore {
background: url(foregrdsrc.png) bottom left no-repeat;
}


I don't think this detail will matter, but just in case... I want this appearance for the text of every <td> in a particular table.

Thanks,
oak island

this was my target

I got a image with two transparant shapes.
Behind those shapes I would like to show 2 other images.

|-------1-------|
| |-----| |----| |
| |...2..| |..3..| |
| |____| |____| |
|_____________|

Image 1 should be on top z-Index
Image 2 should under image 1, a part of the image should be visible.
Image 3 should under image 1, a part of the image should be visible.

Image 2 and 3 should be dynamically replaceable.

My solution

The image in front has transparant spaces at 20,40 and 20,120 both 60,60 sized.
Each Image do have a offset, in case a part of the image should be displayed not starting from 0,0.

Code:

This is a drawing.
_____1_____
|  _____   |
| |     |  |
| |..2..|  |
| |_____|  |
|__________|

1. whole image ( should be bigger then 60,60 ).
2. the part that I want to show ( 60, 60 ).

With javascript I can hide/unhide the images and I use the imageLn or imageRn as selector id

I hope you can use it also.


My Style


Code:

#headerContainer {
	 float: left;
	 position: relative;
	 z-index:4;
	 width: 200px;
	 height: 100px }
#headerImageLeft {
	 position: absolute;
	 z-index: -1;
	 top: 20px;
	 left: 40px;
	 width: 60px;
	 height: 60px;
	 display: inline }
#headerImageRight {
	 left: 120px;
	 top: 20px;
	 width: 60px;
	 height: 60px;
	 z-index:-2;
	 position: absolute;
	 display: inline;
	}

Html code


Code:

<td>
<div id="headerContainer">
	 <img src="header-kop-test.gif" alt="" width = "200" height="100" />
	 <div id="headerImageLeft" >
		 <div id="imageL1" style="top:-8px;left:-20px;position:absolute;">
			<img src="header-links-test.gif" alt="" />
		 </div>
		 <div id="imageL2" style="top:-10px;left:-10px;position:absolute;">
			<img src="header-links-test2.gif" alt="" />
		 </div>
	 </div>
	 <div id="headerImageRight" >
		<div id="imageR1" style="top:-30px;left:0px;position:absolute;">
		 <img src="header-rechts-test.gif" alt="" />
		</div>
		<div id="imageR2" style="top:-10px;left:-18px;position:absolute;">
		 <img src="header-rechts-test2.gif" alt="" />
		</div>
	 </div>
</div>
</td>

My questions:
Can I optimize this code?
Is this working on the most browsers? or are there know issues?

Greetz and thanks

R

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

CODE TITLE:
CSS drop shadow

DESCRIPTION:
Technique to build flexible CSS drop shadows (realistic) applied to arbitrary block elements (no images).

URL TO CODE:
CSS drop shadow