CSS Rollover Question

[kwilliams]

With the help of a great article, I created a great page that uses horizontal CSS rollovers (see http://www.douglas-county.com/Test_Folder/cssmenu.asp), but I'm having a problem with one of the CSS behaviors. When you go to Departments > Elephant > Indian, you'll notice that the Elephant link turns back to the blue color. I need to to stay white. I know that it's changing back because "Elephant" is a link, but can anyone see what I'm doing wrong, or what I'm missing? Thanks for any help.

[David Harrison]

There is some sort of strange phnomenon here, I try out your page online and it works fine, however when I save the source as a .html page on my PC it suddenly stops working. This means that I can only suggest changes to the source that I think might work.

Try changing the rules to look a bit like this:


ul.makeMenu li { list-style-type: none; margin: 0px; position: relative; color: #330066;}

ul.makeMenu li:hover { background-color: #FFFFCC; color:#ffffff;}

ul.makeMenu li a { color: inherit; display: inline; width: 100%; text-decoration: none;}
Also, you might want to download a couple of browsers, I'm assuming that you only tested in IE because in Opera the final sub-menu overlaps the drop-down part of the menu and in Mozilla everything is scrunched up in the top left hand corner. Check out these pages:

http://www.opera.com/ (Don't worry, the browser is free, but you have to put up with a small advert.)
http://www.mozilla.org/ (This one is totally free!)

[Robert Wellock]

You call yourself a hacker in training and save as *.html yea verily dost thou not know they were using 'IEmen.htc' and proprietary HTML hence why it wouldn't work offline.

[David Harrison]

Originally posted by Robert Wellock
...yea verily dost thou not know they were using 'IEmen.htc' and proprietary HTML hence why it wouldn't work offline. Sorry, what was that again?

I saw this bit:


<!--[if gte IE 5]>
<style type="text/css">
ul.makeMenu li { behavior: url( IEmen.htc ); }
ul.makeMenu ul {display: none; position: absolute; top: 15px; left: -1px; }

ul.makeMenu2 li { behavior: url( IEmen.htc ); }
ul.makeMenu2 ul {display: none; position: absolute; top: 0px; left: 78px; }
</style>
<![endif]-->
But I have no idea what it does, having downloaded the file IEmen.htc it now works though, still, like I say, no idea why.

[kwilliams]

Hi lavalamp,

I tried your suggestion of:
ul.makeMenu li { list-style-type: none; margin: 0px; position: relative; color: #330066;}

ul.makeMenu li:hover { background-color: #FFFFCC; color:#ffffff;}

ul.makeMenu li a { color: inherit; display: inline; width: 100%; text-decoration: none;}

...but it resulted in all of the links turning into the default blue. Do you have any other suggestions?

[David Harrison]

OK then, starting from your original script change this line:


<li><a href="indian.html">&nbsp;Elephant &gt;</a>
to this:


<li style="cursor:pointer;cursor:hand;">&nbsp;Elephant &gt;