You'll need to tell us a bit more about how you highlight it in the first place.

Check out this crappy CSS drop down menu <snip>

when you put your cursor over "Demos" you can scroll down the menu with "Demos" still highlighted. Thats the effect im after :)

Thanks

[edited by: swa66 at 1:12 am (utc) on April 5, 2009]
[edit reason] Tke care with links, we're very conservative with them. [/edit]

I guess we all know how you want the result to be, What I was trying to ask is how you currently highlight it "till it goes away".

I'm a bit afraid you're higlighting it by hovering the <a>, not by hovering of the <li> (assuming you have a traditional nested list with links as html).

This is the code im currently using:

div.menuBar a.menuButtonActive6,
a.menuButtonActive6 { background: url(down.gif); }
background-color: #98c601;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
cursor: hand;
color: #ffffff;
.dropmenudiv a:hover{
background-color: #66CCFF;
}
div.menuBar a.menuButtonActive6:hover {
background:url(down2.gif); }
background-color: #66ccff;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
cursor: hand;
color: #ffffff;
}

Ok, in that case I guess it would be useful to see a bit more relevant and sanitized html as well.

Heres a snip of the HTML I am using:

<link href="style.css" rel="stylesheet" type="text/css">
<a class="menuButton menuButtonActive6" rel="dropmenu1">Other Services</a>

a CSS dropdown menu usually uses a nested list of <ul>s:

<ul>
  <li><a href="#>one</a>
    <ul>
      <li><a href="#>alpha</a></li>
      <li><a href="#>beta</a></li>
    </ul>
  </li>
  <li><a href="#>two</a>
    <ul>
      <li><a href="#>charlie</a></li>
      <li><a href="#>delta</a></li>
    </ul>
  </li>
</ul>

I'm not seeing that ...

The next trick used is to hide the second level
And to show it when the first level <li> is hovered.

IE6 will need scripted help here as it's too far from the standard to support hovering on anything but an <a>.

This would also be where you style it all.

The positioning can be done with absolute positioning on the second level <ul> and relative positioning on the first level <li> to get the second level to reference the position of the first level.

There are loads of examples out there to choose from (and quite a few you're allowed to re-use as well).

Thank you for your help :) Have a nice evening

---

System: The following 5 messages were spliced on to this thread from: http://www.webmasterworld.com/css/3885639.htm [webmasterworld.com] by swa66 - 12:45 pm on April 6, 2009 (utc 0)

---

Hi,

All my CSS image backgrounds show up fine in FireFox but not in IE. Heres the code I use:

div.menuBar a.menuButtonActive6,
a.menuButtonActive6 { background: url(down.gif); }
background-color: #98c601;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
cursor: hand;
color: #ffffff;
.dropmenudiv a:hover{
background-color: #66CCFF;
}
div.menuBar a.menuButtonActive6:hover {
background:url(down2.gif); }
background-color: #66ccff;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
cursor: hand;
color: #ffffff;
}

Thank you!

Either there's some major cut&paste errr in there, or your syntax is quite off.

CSS is structered as a series of

selector, selector, selector {
  statement;
  statement;
}

A statement outside the curly braces will cause confusion.

Try validating your CSS: [jigsaw.w3.org...]

Still not working in IE but works perfect in FireFox :(

Thanks bud

---

System: The following 2 messages were spliced on to this thread from: http://www.webmasterworld.com/css/3886101.htm [webmasterworld.com] by swa66 - 12:37 pm on April 6, 2009 (utc 0)

---

Hi,

I cant get my DIV hover background to work or even the text to change to a different color in IE. (FireFox works)

CSS:

div.menuBar a.menuButtonActive6,
a.menuButtonActive6 { background: url(down.gif); }
background-color: #98c601;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
cursor: hand;
color: #ffffff;
}
div.menuBar a.menuButtonActive6:hover {
background:url(down2.gif); }
background-color: #66ccff;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
cursor: hand;
color: #ffffff;
}

HTML:

<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="menu.js"></script>
<div class="menuBar" id="chromemenu">
<a class="menuButton menuButtonActive6" rel="dropmenu1">Other Services</a>

Thanks

It seems there are redundant ALTMODE } on your CSS.

Your CSS has syntax errors in it. As long as it's like that it makes browsers guess what you mean. Browsers are notoriously bad at reading your mind.

Try to make it validate: [jigsaw.w3.org...]
For that matter: do the same with your html: [validator.w3.org...]

but to get you started as you seem stuck without changing things:

div.menuBar a.menuButtonActive6,
a.menuButtonActive6

these are two selectors (separated with a comma), they are most likely trying to select the same element (based on the rather limited amount of html I've seen).

So cut this back to just "div.menuBar a.menuButtonActive6"

div.menuBar a.menuButtonActive6 { background: url(down.gif); }
background-color: #98c601;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
cursor: hand;
color: #ffffff;

The red curly brace should have been at the end of this fragment to give you:

div.menuBar a.menuButtonActive6 { 
  background-image: url(down.gif);
  background-color: #98c601;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  cursor: hand;
  color: #ffffff;
}

Note that I switch your background shorthand statement to background-image since your not using the shorthand notation and are setting other background properties separately.

.dropmenudiv a:hover{
background-color: #66CCFF;
}

Doesn't seem to be relevant in the context of the html shown.

div.menuBar a.menuButtonActive6:hover {
background:url(down2.gif); }
background-color: #66ccff;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
cursor: hand;
color: #ffffff;
}

has the same problematic curly brace that's there way too soon.

And sets things the same as it was without the hover already (not needed to be done).

So, cut this back to:

div.menuBar a.menuButtonActive6:hover {
  background-image:url(down2.gif);
  background-color: #66ccff;
}