20-10 submenu problem

Hi

It was not clear from your post but I assume you are saying it is Internet Explorer in which the drop shadow doesn’t appear.

That is because the stylesheet is using CSS3 Box Shadow to produce the drop shadow.
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); (for Firefox)

Internet Explorer 8 and below do not support these CSS3 commands – IE9 does. Thus you can’t make them work in IE7 and IE8.

There are Javscript libraries you can add that emulate this in IE7 and IE8 but they have lists of conditions under which they don’t work as intended.

A commonly used approach is to use an IE7 and IE8 conditional stylesheet in which you style the appearance for IE7 and IE8 to your liking using CSS that works in IE7 and IE8, while visitors with more current browsers have a better visual experience on the same site.

Deat Stvwlf,
Thanks for your reply, but I’m sorry that I wasn’t clear as to the problem, although you might be right that there is no answer.

I am interested rather to find out why the text (div?) doesn’t drop down directly over the shadow, but rather shifts to the right on those same browsers that I mentioned. I haven’t tried IE.

Can I shift the box-shadow right to cover the text, or shift the text left, and how? Or, can I change the width of the ul.sub-menu to something smaller?

Thanks for your help,
David

#access ul ul {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
#access ul ul li {
	min-width: 150px;
#access ul ul ul {
	left: 50%;
	top: 0;
#access ul ul a {
	background: #613836;
	line-height: 1em;
	padding: 5px;
	width: 170px;
	height: auto;
	float: left;