How to add a one pixel drop shadow around main nav link along with the entire sub-nav dropdown?

Question

I am using drop-down menus with my main navigation links and need to add a one pixel drop-shadow around everything (the current nav button/link (that has rounded corners using border-radius) and the entire sub-nav element that drops down).

I've posted a demo of it on JSFiddle:

http://jsfiddle.net/thebluehorse/TFqjR/2/

Can someone update it or to me what to do to make it have a one pixel drop shadow around everything when hoving over the nav link? Note that it needs to go around the rounded corners in the main nav. It needs to support IE7+, but I guess if box-shadow is used then CSS3 Pie can be used as a helper.

Any help would be greatly appreciated. This thing has been driving me crazy.

Answer 1

There are a number of ways to achieve your goal. The simplest is to set a static class to your nested ul elements. This is because they are only ever visible when they are triggered by the parent's hover event. Example: http://jsfiddle.net/deloretta/gspnK/ (note: to prevent the text inside the parent element from "jumping" about, you could try adding a padding of 1px to the element and removing it on hover, or aligning text centrally, or whatever method you like).

Secondly, the more inefficient way (but has it's uses which I wont go in to here) you can find out if this element has children and apply the class to them like so: http://jsfiddle.net/deloretta/XVrr6/

Ideally, the IE7+ styles would reside in their own style sheet (as IE7+ supports the !important syntax) and you could access them using conditional comments. Basically, strip out the border properties and place them into an IE specific stylesheet. IE will ignore the -moz- and -webkit- declarations and render the border properties correctly, whilst moz/webkit ignore the conditional comments and render the box shadow. Lovely jubbly.

Hope this helps!

EDIT - response to your initial comment:

I think I understand your comment. If not, let me know and I will try to help further.

To make this work with conditional comments you should separate the two styles. One specific for IE and the other for all other browsers. You can do that like this:

<link rel="stylesheet" type="text/css" href="/style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/style_ie.css"> 
<![endif]-->

You should then modify your existing stylesheet to contain this information:

#nav #link1.selected > a {
  padding-bottom: 10px;
  margin-bottom: 0;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
  /*the border declaration used to be here
  but we moved to another stylesheet
  specifically for IE*/
  -webkit-box-shadow:0px 1px 1px #f0f;
  -moz-box-shadow:0px 1px 1px #f0f;
}
.static_class{
  /*border used to be here*/
  -webkit-box-shadow:0px 1px 1px #f0f;
  -moz-box-shadow:0px 1px 1px #f0f;
}

Next, create a separate style sheet called styles_ie.css - this will house the border information we removed from the other stylesheet. Like so:

#nav #link1.selected > a {
  border-bottom:1px solid #f0f;
  border-left:1px solid #f0f;
  border-right:1px solid #f0f;
}
.static_class{
  border-bottom:1px solid #f0f;
  border-left:1px solid #f0f;
  border-right:1px solid #f0f;
}

So... What happens?

Internet Explorer is the only browser that supports conditional comments. So when Firefox, Safari or Chrome lands on the page, they ignore the comments, and consequently, don't render the style sheet linked in the comments.
When Internet Explorer lands on the page, it renders everything it understands from the styles.css - ignoring the border-radius and box-shadow properties and so on (because it doesn't understand them). It then moves on to the conditional comments (which it understands) then loads up the style sheet styles_ie.css and then applies the extra style to the elements. Easy-peasy, lemon-squeezy :]