Is it possible to have a box-shadow with visibility: hidden?

Although I know quite a bit about CSS and have used a box-shadow property quite a bit on my sites, I have hard time figuring out how to make it work with visibility: hidden.

I have a drop down thing that opens on click, I want it to stand out a bit, but when I add a box-shadow property to the CSS the shadow doesn't show.

The box:

<div style="width: 500px; position: absolute; visibility: hidden; border: 3px solid #ADCFFF; background-color: #FFFFFF; margin: 5px 0px 0px 0px; padding: 15px; line-height: 20px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; box-shadow: 0px 4px 5px 0px rgba(143, 143, 143, 0.47); -moz-box-shadow: 0px 4px 5px 0px rgba(143, 143, 143, 0.47); -webkit-box-shadow: 0px 4px 5px 0px rgba(143, 143, 143, 0.47);">


Something goes here....


</div>

Code (markup):

Is there a way to get around this to make it work?

 

Don't use visibility:hidden - there's a reason things like dropdown menus do NOT use it given how many screen readers will obey it, and since screen readers cannot 'click' or hover...

set it APO left:-999em, then on 'click' or 'hover' or whatever you are doing set it to left:0;

Of course, APO without top or left is unpredictable cross-browser so... and of course even as testing code using the STYLE attribute for layout is just sloppy garbage. (Just saying - there's a reason I think STYLE should be obsolete as a tag and deprecated as an attribute)

 

Thanks @deathshadow I will try what you've suggested.

I personally like STYLE, because I can change/readjust anything right on the spot. For instance, let's say I want a different line height or letter spacing in a box that I want to stand out among other boxes <div style="line-height:90%; letter-spacing:1em"> text here... </div> - boom, done! I personally see it as a convenience. I also often use it instead of a <br>. <div style="padding-top: 15px;"> </div> that way I can have nicely spaced paragraphs, it gives me more flexibility. (sometimes <br><br> is either too much or not enough). Etc. etc.

Why do you think it should be deprecated as an attribute?

 

Well, your examples are stunning examples of why -- first off if you're using them instead of P, you're not using semantic markup! If you can't come up with a semantic tag or a class that says WHY it's being shown different, it probably shouldn't be shown different. You're defeating the entire POINT of CSS.

Best practice is to write your markup semantically with ZERO concern for any specific layout FIRST, then you add ID's and classes to hook your styles with, and semantically neutral containers like DIV or SPAN for any presentation -- WITHOUT saying what that presentation IS. HTML is for saying what things ARE, CSS is for saying what they look like for each of your layoutS -- YES, PLURAL! (media targets, media queries, etc, etc).

That point being MULTIPLE TARGETS via the MEDIA attribute. You're shoving style in the markup you might not even WANT on say... print... or handheld... or in your media queries. You're also practicing presentational markup -- if you have presentation in the markup, that's what it is, EVEN when using the style attribute.

It's the same as people who use classes like "red" or "left"... or idiotic HTML 5 tags like ASIDE... PRESENTATIONAL MARKUP -- you might as well go back to using HTML 3.2 at that point.

Though notice I said deprecated, not obsolete like I would the tag. The reason I'd leave it deprecated is so it throws a warning (deprecated should be warnings, obsolete should be errors!) since there ARE a handful of very, very, very tiny scenarios where a value could be used to convey data. A great example is a simple progress bar.

<div class="progress"><span><span style="width:50%"></span></span> 50%</div>

.progress {
  overflow:hidden; /* wrap floats */
  zoom:1; /* trip haslayout, wrap floats IE */
}

.progress span {
  position:relative;
  display:inline-block;
  width:256px;
  height:8px;
  font-size:1px; /* fix IE min-height quirk */
  border:2px solid #000;
}

.progress div div {
  display:inline-block;
  background:#55F;
  border:0;
}

Code (markup):

THEN I can see using style since it's conveying content after a fashion... though really that's about the ONLY time I'd use the style attribute in this day and age since again, if you can't convey it with semantic markup and zero presentation in the markup, you're probably doing things all wrong!