Interspire Shopping Carts: Add a Flyout or Dropdown Menu to Sidebar Panel

Here is the easiest way I have found to add flyout or drop down menus to a particular panel in an Interspire shopping cart’s template.

First, sign  into the website’s admin panel.

Go to Settings -> Store Settings -> Display.

In the box next to Category List Depth, change the number to the number of levels you want to display in the flyout or drop down menu.

Now, go to Store Design and then click Browse Template files.

In your website template’s style.css file, add this code:

.Left #SideCategoryList li:hover, .CategoryList li:hover, .CategoryList li.Over {
background: #746755;
.Left #SideCategoryList li:hover a, .CategoryList li:hover a {
color: #fff;
.Left #SideCategoryList li ul, .CategoryList li ul {
display: none;
padding: 0 0 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
width: 160px;
position: absolute;
.Left #SideCategoryList li:hover ul, .CategoryList li:hover ul {
display: block;
.Left #SideCategoryList li:hover li, .CategoryList li:hover li {
float: none;
background: #f0eee8;
.Left #SideCategoryList li:hover li a, .CategoryList li:hover li a {
color: #444;
font-size: 14px;
text-transform: none;
font-style: normal;
border-top: 1px solid #f0eee8;
border-bottom: 1px solid #f0eee8;
.Left #SideCategoryList li li a:hover, .CategoryList li li a:hover {
background: #746755;
color: #fff;
border-color: #fefaf3;
.Left #SideCategoryList li:hover, .CategoryList li:hover {
background: #746755;
.Left #SideCategoryList li:hover a, .CategoryList li:hover a {color: #fff;}

.Left #SideCategoryList li ul, .CategoryList li ul {display: none;padding: 0 0 9px 0;-moz-border-radius-bottomleft: 17px;-moz-border-radius-topright: 17px;-webkit-border-top-right-radius: 17px;-webkit-border-bottom-left-radius: 17px;width: 160px;position: absolute;
.Left #SideCategoryList li:hover ul, .CategoryList li:hover ul {display: block;position:absolute;margin-top:-15px;left:160px;width:160px;
.Left #SideCategoryList li:hover li, .CategoryList li:hover li {float: none;background: #f0eee8;}
.Left #SideCategoryList li:hover li a, .CategoryList li:hover li a {color: #444;font-size: 14px;text-transform: none;font-style: normal;border-top: 1px solid #f0eee8;border-bottom: 1px solid #f0eee8;}
.Left #SideCategoryList li li a:hover, .CategoryList li li a:hover {background: #746755;color: #fff;border-color: #fefaf3;}

This code will add a flyout menu to the Category panel in the left sidebar of your website. You can change the name of the panel in the codes if you want to apply the flyout menu to another panel.

Next, you will want to edit the styles above to match the design of your own site.

And that’s all you need to create flyout or dropdown menus for the sidebar of your Interspire shopping cart template!

Let me know if you run into any issues or have any questions.

You can also learn how to create your own custom panels for Interspire shopping carts in another post I wrote.


  1. Jasmin says:

    That’s a good tip to add a flyout to Interspire’s sidebar panel. You have saved my day, thanks so much!

  2. Edward says:

    Hello, Please want you to help me, I do exactly what you say, but when you hover the mouse over the categories, you can`t click on subcategories, desappears soon, even I set up for 10 seconds in the cpanel… Please help in this…

  3. Comments are closed.