Can anyone help me on my category menu style? Thank you.

[mdivk]

I am not good at css at all, here is my demo shop.

I installed zen_cart_vertical_multi_level_slide_out_category_menu_1.1 to get a better category menu for my shop, here is thing I need to fix it:

If you hover to the category, and the category has sub cat, fine, but it will become invisible if it is in the slider area, you can see it for the first couple categories: hardware, software, etc.

How to make it always on the top?

Thank you very much.

[RodG]

I am not good at css at all, here is my demo shop.

I installed zen_cart_vertical_multi_level_slide_out_category_menu_1.1 to get a better category menu for my shop, here is thing I need to fix it:

If you hover to the category, and the category has sub cat, fine, but it will become invisible if it is in the slider area, you can see it for the first couple categories: hardware, software, etc.

How to make it always on the top?

Thank you very much.

File: demo.webdesignstudiotoronto.com/slide-out-menu-new.css
Lines starting #34

.dhtmlgoodies_subMenu{
    /* visibility:hidden; */
    position:absolute;
    /* overflow:hidden; */
    border:0px solid #000;
    background-color:#FAFAFA;
    font-family:arial;
    text-align:left;
    z-index: 99;
}

Add the line of code highlighted. Don't make any other changes.

Save the file and check.

Cheers
RodG

[mdivk]

Thank you Rod, is the fly out speed something adjustable?

[mdivk]

Just realized a big issue here:

This flyout style will not work on mobile devices!

Do you have any suggestion?

Thank you very much.

[RodG]

Thank you Rod, is the fly out speed something adjustable?

Yes.
https://css-tricks.com/almanac/prope...tion-duration/


If you don't wanna do all that reading, add: "transition-duration: 1ms;" to the same piece of code as before (suggest just before the newly added z-index)

Cheers
RodG

[RodG]

Just realized a big issue here:

This flyout style will not work on mobile devices!

Do you have any suggestion?

Thank you very much.

You are using a responsive template so it should be showing differently on mobile devices anyway.

It may be worthwhile taking a look at this for further tips.
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Cheers
RodG

[mdivk]

Thanks Rod.

Have a good weekend.