How do I add the snazzy lines that separate each category name in the drop down menu, such as the ones displayed at http://www.ectdemostore.com/responsivestyles/ (hovering over "Products")?

Hi, it's just a border on the bottom of the element there.

Here is the CSS from the demo store that does that..



David

Mine seems to have that same code, but no snazzy lines. This is in my ectstylebase.css (line 167)

.ectmegamenu > ul > li > ul.normal-sub > li a,
div.ectmegamenu > ul > li > ul > li a,
div.ectmegamenu > ul > li > ul > li > ul > li a{
color:#333;
border-bottom:1px solid #333;
padding:12px;
box-sizing:border-box;

Hi Tim
The Mega Menu in the current templates is in a <DIV> called "ectmegamenu" and this is assumed for a lot of the styles. Part of the reason for giving the mega menu a newly named container was just so that it would not affect existing installations. Yours is in a <DIV> called just "menu" and that would be the first step to getting the built in styles to work. But at the same time, some of the styles in /css/megastyle.css would have to be changed to apply not to "menu" but to "ectmegamenu". If you've got a test site I could give it a go for you. I could try it on the live site if you don't mind things going a bit wonky till I get the changes sorted.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Vince,

Thanks for the info! I do appreciate the offer to help, but it seems like some work and I am won't lose any sleep without it. I just thought it looked good, I wouldn't mind having those snazzy little lines as an option some day. Perhaps something for the suggestions forum

Actually thinking about it a simpler (though slightly less efficient) way to do this would be to copy and paste the classes but changing "ectmegamenu" to "menu". So for instance...

.menu > ul > li > ul.normal-sub > li a,
div.menu > ul > li > ul > li a,
div.menu > ul > li > ul > li > ul > li a{
color:#333;
border-bottom:1px solid #333;
padding:12px;
box-sizing:border-box;

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Vince,

Just to be sure...would I just be changing this line in my ectstylebase.css file?

from

.ectmegamenu > ul > li > ul.normal-sub > li a,

to

.menu > ul > li > ul.normal-sub > li a,

Or...do I need to just add this code to the ectstylebase.css file?

.menu > ul > li > ul.normal-sub > li a,
div.menu > ul > li > ul > li a,
div.menu > ul > li > ul > li > ul > li a{
color:#333;
border-bottom:1px solid #333;
padding:12px;
box-sizing:border-box;

Actually, you want to copy the styles from ectstylebase.css to your site stylesheet, say style.css and edit them there. If you change anything in ectstylebase.css then it will be overwritten by updaters.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater