CSS drop-down menu explosion in Internet Explorer 7

Question

I am creating a design with a drop-down menu and everything works well in modern browsers (i.e. Firefox, Chrome, Opera, Safari, and IE9). However, due to to the number of visito

Answer 1

Overall, your issue is that the CSS you are using is more advanced than some of the browsers you need to support. Rounded corners and most pseudo elements have spotty support in older browsers.

I noticed that your arrow is missing in IE7, that was my clue. IE7 does not support the pseudo-class element :after. Here is a helpful reference page to check on browser support of certain CSS http://kimblim.dk/css-tests/selectors/.

Quirksmode.org is a good resource for compatibility. Here is there page specific to :after http://www.quirksmode.org/css/beforeafter.html