1 reply [Last post]
steven.cssforum
Offline
newbie
Last seen: 18 years 9 weeks ago
Joined: 2004-09-28
Posts: 1
Points: 0

Hello all,

These are my first steps into the XHTML/CSS world, so please be gentle with me Wink .

I'm trying to make a CSS tree menu with CSS (and a very little javascript). It almost works, well it works perfectly in FireFox, but IE isn't doing what it supposed to do.

The menu I'm talking about can be found here:
http://www.rodeofreaks.com/test3/

What are the problems?
In FireFox
--> none

In IE
--> it doesn't show the hover-effect (the yellow squares don't turn into red when I move my mouse over the items)
--> there are also extra spaces between the items as well as the parents

The CSS-code is:

#menuTree {
  width: 160px;
  margin: 0 0 2px 0;
  font: small verdana, arial, sans-serif;
  color: #292963;
  background-color: #FFFF93;
}

#menuTree li a {
  display: block;
  text-decoration: none;
}

#menuTree li {
  list-style-type: none;
}

#menuTree ul.item li {
  color: #FFCC00;
  list-style-type: square;
  font-size: 10px;
}

#menuTree ul.item li a {
  color: #292963;
}

#menuTree ul.item li:hover {
  color: #FF0000;
}

.open ul { 
  display: block; 
}

.open a.parent {
  color: #292963;
  background: url(images/minus.gif) no-repeat 0 bottom;
}

.open a.parent:hover {
  background: url(images/plus.gif) no-repeat 0 bottom;
}

.open a.sub {
  background: url(images/minus.gif) no-repeat 0 bottom;
}
  
.closed ul { display: none; }

.closed a.parent {
  color: #292963;
  background: url(images/plus.gif) no-repeat 0 bottom;
}

.closed a.parent:hover {
  background: url(images/minus.gif) no-repeat 0 bottom;
}

.closed a.sub {
  color: #292963;
  background: url(images/plus.gif) no-repeat 0 bottom;
}

Can somebody please tell me what I'm doing wrong or how I could get rid of these problems? Extra tags only for IE???

Thanks to all in advance!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

CSS tree menu - problems!

Hi Steven,
IE doesn't support hover on li's, so you will have to find another method of getting hover to work most likely with JavaScript.

This menu may give you some ideas http://www.csscreator.com/menu/multimenu.php

Hope that helps