Dropdown menu border not showing in IE

HTML & CSS
1

Hello there,

I’m building a site that uses dropdown menu. Here’s the link to it.
http://www.lifecafe.me/

This dropdown uses nested <ul> tags which are styled with CSS and each of the child menu should have a colored border that matches the color of its parent.

While this works fine with FireFox, Chrome and Safari, it fails on all versions of Internet Explorer. I’ve looked around for the solution in this forum and quite few other places without any luck. I’ve also tried the use of background image for the border but this fails on IE as well.

Does anyone have come across a similar issue?

2

Hi, the problem is you have no space between the hex code and the value :slight_smile:

#category_bar ul li#cat-36 ul.children{border:1px solid #F45C0B;}

Notice how I put a space between “solid” and the hex code? Your code in your page doens’t have that. You have many instances of that. Change all :). IE is ignoring the rule becuase of that

3

Hi Ryan,

Thanks for pointing out the ‘space’ issue. The CMS has a feature of combining and minimizing the CSS files. It seems like the CMS in not inserting a space in front of ‘#’ character. I solved this by moving the hax value before all other so that the resulting style looks like below.

#category_bar ul li#cat-36 ul.children{border:#F45C0B 1px solid;}

This solved it. Cheers!

4

Hi There,

First of all is that drop down full html and css based or does it rely on anything else such as javascript of jquery