I am experiencing some issues with a drop down menu which I have taken from [url removed, login to view] and adjusted to incorporate a second drop down menu which can be seen at [url removed, login to view] In addition to this I have added a -webkit-box-shadow and -moz-box-shadow and attempted to implement progid:[url removed, login to view] for IE. I am having problems with 2 areas which are the shadow and the alignment of the drop down menu.
Design Code and Demo
I have uploaded the demo to [url removed, login to view] and the code is all within the source file of this.
1. Drop Shadow
The shadow works exactly as intended in Firefox/Chrome & Safari but I am having problems with the drop shadow in Internet Explorer. The actual drop down menu shadow works fine in IE but the header drop shadow doesn't work which I have added to #menu a.menu-open. (See attachment image)
2. Drop Menu Alignment
I have experienced some problems in certain browsers with the positioning of the drop down menu and was wondering if anyone could also help with this. The menu works perfectly in Firefox and Google Chrome but has minor alignment issues in other browsers which I have outlined in the attached picture which shows various browsers and the alignment problems.
I am looking for someone to check the code and see if it is missing anything that would fix this and not require going down the CSS Hack route?
Many thanks in advance