Support for CSS Flyout Menu

[gjh42]

This mod will have different structure and element classes and ids than whatever you have, so you will have to transfer the styling from your current elements to the new ones. You will have to let us see your site live to get specific advice on how to adapt your style rules.

[giftcastle5]

Sure my site is http://perfectcarcorp.net/. I have the categories set up in a way on the left but I would like to use the second categories box on the left as my default since its perfectly themed. Can you help me with that?

[giftcastle5]

Anybody?

[gjh42]

The only real differences between the BetterCategories sidebox and the flyout one is the dividers between items and the bullets (and the font being a wee bit smaller). Do you want those things on the flyout menu? I think the flyout's current state of arrows is better for its functionality that the BC arrows would be.

[giftcastle5]

Thats fine then could you help me with one last thing? The categories display weird on IE maybe somethings wrong in my code? Could you give it a look?

/*Version 1.3.9b*/
/*Cornflowerblue Menu CSS*/
#categoriescss.leftBoxContainer { 
   background: #fff;
   border: 1px solid #E6E6E6; 
   width: 150px; 
   padding-bottom: 0px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}

#categoriescssHeading.leftBoxHeading {

   margin-bottom: 0px;
}

#nav-cat {
   width: 150px; 
   margin: 0 0 0px;
   background-color: #fff; 
   font-size: 12px;
}

#nav-cat ul {
   margin: 0; 
   padding: 0; 
   width: 150px; 
   background-color: #fff;
}

#nav-cat ul.level2 {background-color: #67cadf;}
#nav-cat ul.level3 {background-color: #67cadf;}
#nav-cat ul.level4 {background-color: #67cadf;}
#nav-cat ul.level5 {background-color: #67cadf;}
#nav-cat ul.level6 {background-color: #67cadf;}

#nav-cat li {
   position: relative; 
   list-style: none; 
   margin: 0;
   margin-top: 0px; /* change this to put space between buttons*/
   border-bottom: 1px solid #d########3;
}

#nav-cat li li {
   margin: 0; /* overrides the margin-top above */
}
 
#nav-cat li:hover {
   z-index: 1000;
   background-color: #67cadf;
}

#nav-cat li a:hover {
   color: #000000;
}




#nav-cat li.submenu {
   background: url(../images/arrows/arrow11.png) 99% 50% no-repeat;
}

#nav-cat li.submenu:hover {
   background: url(../images/arrows/arrow5.png) 99% 50% no-repeat;
}

#nav-cat li.submenu ul a {
   color: #000000;
}

#nav-cat li.submenu ul a:hover {
   color: #fff;
}

#nav-cat li a {
   display: block; 
   padding: 0.25em 0 0.25em 0.5em;
   text-decoration: none; 
   width: 100%; color: #000;
}

#nav-cat>ul a {
   width: auto;
}

#nav-cat ul ul {
   position: absolute; 
   top: 0; 
   left: 150px;
   display: none;
}

#nav-cat ul.level1 li.submenu:hover ul.level2,
#nav-cat ul.level2 li.submenu:hover ul.level3,
#nav-cat ul.level3 li.submenu:hover ul.level4,
#nav-cat ul.level4 li.submenu:hover ul.level5,
#nav-cat ul.level5 li.submenu:hover ul.level6 {
   display:block; 
   border-left: 2px solid #d########3;

[gjh42]

I don't know if it is causing problems, but there is an error here:

#nav-cat li {
   position: relative; 
   list-style: none; 
   margin: 0;
   margin-top: 0px; /* change this to put space between buttons*/
   border-bottom: 1px solid #d########3;
}

This needs to be # with six digits/letters, like #ddaa33

[giftcastle5]

That did the trick thank you very much for your help!