Category Accordion Menu not working properly in ie

I have set up a categories accordion menu which works in Firefox and Chrome (with the exception that the top item always starts open) but in Internet Explorer the second level subcategories are always showing layered on top of the first level categories. Have I done something wrong or is this not compatible with Internet Explorer?

-- url of the page with the problem -- : www.classicphotos.com.au/
-- HikaShop Business version -- :2.2.11
-- Joomla version -- : 3.15
-- PHP version -- : 5.3.27
-- Browser(s) name and version -- : Internet Explorer 8, 9, 10

Hi,
I think that using some CSS code like this will probably do the job :

Thanks Mahomed, but I don't want to hide it altogether, I want it to show when the parent category on the accordion is clicked as it does with other browsers.. Your solution removes the dropdown items completely for all browsers.

Hi,

It's an overflow css problem. You have to check it with your template.
I is hard to give you an answer. IE is a not easy at all to debug and make tests (like we can do with Firefox or Chrome).
But it uses the native Joomla system and the CSS rules are given by your template. Maybe it missed something for the IE compatibility ?

Regards,

Thanks Jerome. I guessed that was the case. I was hoping there would be an easy way to track it.

Okay I've found a line in the Bootstrap.css which is causing the problem.
overflow: visible \9;
Apparently this has been removed from later versions of bootstrap so I have removed it and the menu now works in all versions of ie.

Still have the problem that the top item always is open when the page loads. Any suggestions there?

That's the normal behavior of the accordion system. If you don't want that, you need to edit the file "listing_list" of the "category" view via the menu Display>Views and change the code:
$this->tabs->setOptions(array('startOffset'=>$found,'startTransition'=>0));

to:
$this->tabs->setOptions(array('startOffset'=>-1,'startTransition'=>0));