Flyout Menu CSS - Help!

[NathanLee0921]

Hello everyone,

I want to make the Fly out Menu look like the layout of my website. I downloaded the Zen Cart Flyout Menu Add-on, but have no way of making it look like my website original category.

This is how the category should look:
http://stylizedwatches.com/

This is how the fly out menu look (wrong):
http://rc-access.com/

Changing the color is all I know how to do.

There's only two things that need to be change.
1. The category separation. It needs to have the small blue dots.
2. Add a little arrow at the beginning of each category.

Are there CSS codes that I can add directly to my original template and make the original category have a fly out menu function. I know you can do it, but I know little CSS. And that's why Zen Cart is a life saver to me.

I have also, looked at template monster (dot) com, but found no template with an already built in flyout menu effect.

Any help would be much appreciated. And if anyone know or sell a template with an already built in fly out menu effect that looks great the those templates from templatemonster (dot) com, let me know.

[NathanLee0921]

I meant the little white dots that separate the products, not the little blue dots.

[NathanLee0921]

My StyleSheet.CSS file is in the attachment, hope someone can help. Thank you.

[tony_sar]

open your stylesheet_cateogies_menu.css find and modify the following

div#nav-cat li {
background-color:#FCFCFC;
border-bottom:1px dotted #C5C5C5;
list-style:none outside none;
margin:0;
position:relative;
z-index:1;
}

div#nav-cat {
background-color:#FFFFFF;
font-size:1.3em;
font-weight:bold;
margin-left:auto;
margin-right:auto;
margin-top:0;
padding:5px 10px 15px;
width:100%;
}

add this to end of this stylesheet.

#nav-cat li {
background-image:url("../images/point.gif");
background-position:left center;
background-repeat:no-repeat;
}


lets do this first before fixing other stuff

[NathanLee0921]

open your stylesheet_cateogies_menu.css find and modify the following

div#nav-cat li {
background-color:#FCFCFC;
border-bottom:1px dotted #C5C5C5;
list-style:none outside none;
margin:0;
position:relative;
z-index:1;
}

div#nav-cat {
background-color:#FFFFFF;
font-size:1.3em;
font-weight:bold;
margin-left:auto;
margin-right:auto;
margin-top:0;
padding:5px 10px 15px;
width:100%;
}

add this to end of this stylesheet.

#nav-cat li {
background-image:url("../images/point.gif");
background-position:left center;
background-repeat:no-repeat;
}


lets do this first before fixing other stuff

Thank you so much for your help! My flyout category now looks like this: http://rc-access.com/

1. The problem is the little arrows only show when I do "text-align: center;" or "text-align: right;"

When I do "text-align: left;" or no text-align at all, which is what I wanted to do, the arrows disappear.

2. I would like the number of products to show up next to the category, just like the original category sidebox.

All in all, I'm trying to make the flyout menu category look just like the original category.

Thank you for your great help,
Nam H. Vu

[NathanLee0921]

Also, I want to make the sub-menu similar to the main menu.

1. The dotted line for the sub-menu needs to be a little shorter on both end. Just like the main category.

[tony_sar]

add this to your stylesheet.css . this will fix the text align issue

#nav-cat li a:link {
text-align:left;
padding-left: 10px
}

[NathanLee0921]

add this to your stylesheet.css . this will fix the text align issue

#nav-cat li a:link {
text-align:left;
padding-left: 10px
}

Worked perfectly. Thanks!

1. How do I make the product quantity show up next to the category?

2. The flyout category is running out of its sidebox. What can I do to prevent this?

3. The text-align above worked, but only for categories that have sub-category. What about the ones without sub-category?

4. How do I indent the sub-category to make it look more like the main category?

[NathanLee0921]

I've fixed problem #3 above. This is how my CSS style sheet look at the moment. It is in the attachment. Please take a look and help me fix the remaining problems above.