5

I made a little menu with a few button. I've added a shadow to the menu buttons. It works perfectly. I would like to make some "depth" in the menu, so they really become "buttons". This works well if you play around with shadows. Without any actions, the shadow should be at the left top corner.

#menu ul li {
    -moz-box-shadow: -3px -3px -3px #888;
    -webkit-box-shadow: -3px -3px -3px #888;
    box-shadow: -3px -3px -3px #888;
}

But once I hover over it, this shadow doesn't want to go away, even when I do

#menu ul li:hover {
    border-radius: 5px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Why doesn't it want to go away?

Nikola K.
  • 7,093
  • 13
  • 31
  • 39
  • Just a note that the :hover pseudo class only works on links in IE6. I doubt your using it, but just want to point that out. – Derek Hunziker Jul 25 '12 at 21:27
  • Set box shadow to 0; not none – gopi1410 Jul 25 '12 at 21:28
  • 3
    You have `-3px` as the "blur radius" (third value). A negative number is not allowed, so there isn't even a shadow drawn. Have you included the correct CSS? – thirtydot Jul 25 '12 at 21:36
  • 2
    @Derek Hunziker: Huh? The fact that the OP is using rounded corners and box shadows at all should make IE6 completely irrelevant... – BoltClock Jul 25 '12 at 21:36
  • @thirtydot has the right answer; but interesting behaviour none the less. simply removing the `-3px`, or the `-` forces it to work. [jsfiddle](http://jsfiddle.net/zbMzb/) – Ross Jul 25 '12 at 21:40
  • Can you post replicate this in a jsfiddle or http://jsbin.com? – Moin Zaman Jul 25 '12 at 21:42
  • @BoltClock why thank you Mr. Smarty Pants. As I said, I doubted the fact that he was using it. I commented for completeness for others that found this question. Please forgive the irrelevant comment. – Derek Hunziker Jul 25 '12 at 21:43
  • 3
    @DerekHunziker: You should just pretend that IE6 doesn't exist, unless it's specifically mentioned :) – thirtydot Jul 25 '12 at 21:47

2 Answers2

4

the problem, as noted by @thirtydot, is that your box-shadow has an invalid value- the blur cannot be negative.

There's nothing wrong with the :hover, you just need to remove the - from the blur property and the code will work.

<blur-radius> (optional)
This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).

https://developer.mozilla.org/en/CSS/box-shadow

Strange that it seems to break the removal on hover though; rather than just disregard the invalid value as the shadow is still output with a sharp edge.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Ross
  • 18,117
  • 7
  • 44
  • 64
  • Well, that's weird. In Chrome, there is indeed a shadow drawn with the negative blur radius, but *only* when there's a background on the element. Buggy WebKit! Firefox behaves as I'd expect. If the OP is using Chrome, then this probably is the problem. Chrome behaves differently with `-3px` compared to `0`... – thirtydot Jul 25 '12 at 22:11
  • @thirtydot: I'll never understand why everyone loves WebKit to the point of worshiping it. It's *incredibly buggy*, almost on an IE level. *Bleurgh.* (I'm working on a responsive design, and it just crashed Chrome and IE9 a few minutes ago...) – BoltClock Jul 25 '12 at 22:12
  • 1
    Adding `-webkit-transform: scale3d(1,1,1);` which [sometimes fixes WebKit bugs involving redraws](http://stackoverflow.com/questions/11002195/chrome-does-not-redraw-div-after-it-is-hidden/11003051#11003051) makes Chrome work as I'd expect it to in this completely stupid situation with an invalid negative blur radius: http://jsfiddle.net/thirtydot/zbMzb/3/ (the shadow isn't drawn) – thirtydot Jul 25 '12 at 22:15
1

Try this:

box-shadow: 0 0 0;

Is there any other CSS that's being applied to your li? That may be interfering.

Also see: http://css-tricks.com/forums/discussion/14829/trouble-with-box-shadow-on-rollover-hover/p1

Moin Zaman
  • 25,281
  • 6
  • 70
  • 74