Pure CSS Mega Menu

[jewelsnpearls]

Hi Anne,
In the mega-menu I have an annoying issue: when I select a subcategory the parent category stays selected (as I want it) and it takes the properties of the main menu when selected (in my case: white to azure, black text). But the text is moved to the left side, so it touches the edges.

Whatever I tried, I cannot get the text in the right position - any change I make that works on these parents, also works on the top level - and that big fat headline moving back and forth 3 px is totally annoying.

I've tried changing the output of the categories generator, but I simply don't know which class or div they are...
Please check the image. I also add the adjusted stylesheet. can you help me out? What I would really like is to make the parent link (but not the head) pink.
Can you help me out? Any help is appreciated!

Just in case the problem is not clear: the parents jump 3 px to the left side, they do not align with the non-selected (and also not with the hovering) text.

.

The stylesheet:

#mega-wrapper {width: 1048px;/*change this to the width of your site*/margin:0 auto;display:block;position: relative;z-index:9999;
margin-bottom:1em; top:-2em;}
#mega-wrapper .mega-menu {padding-left: 10px; width: 1012px;/*set this width to your site width minus 40px*/
background: White;

filter: progidXImageTransform.Microsoft.gradient(startColorstr='White', endColorstr='WhiteSmoke'); /* for IE */
background: -moz-linear-gradient(top, White, WhiteSmoke);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(WhiteSmoke));-moz-box-shadow:0 8px 6px -6px black, 0px 2px 1px 1px #aaa;-webkit-box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;

list-style:none;margin:30px auto 0px auto;height:30px;padding:0px 10px 0px 10px;}

.mega-menu li {float:left;text-align:center;position:relative;margin-right:10px;margin-top:2px;}
.mega-menu li.fullwidth {position: static !important;}
.mega-menu li:hover {background: azure; border:1px solid WhiteSmoke;margin-right:6px;}
.mega-menu li a {color: black /*was White*/;outline:0;padding: 5px 12px 3px 12px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;}
.mega-menu li:hover a {color:#444;position:relative;z-index:11;padding: 4px 11px 3px 11px;}
.mega-menu li:hover div a {display:inline;}
.mega-menu li .drop {font-family:'Montserrat', Arial, Helvetica, sans-serif;padding-right:16px;}
.mega-menu li:hover .drop {padding-right:19px;}
.infoMenu :hover {background: green; color:white;}

/* bof right aligned menu item */
.mega-menu .right {float:right;right:0;margin-right:5px;}
.mega-menu li.right:hover {margin-right:5px;}

/* bof drop down styles */
.mega-menu .dropdown_1column, .mega-menu .dropdown_2columns, .mega-menu .dropdown_3columns, .mega-menu .dropdown_4columns, .mega-menu .dropdown_5columns, .mega-menu .dropdown_customer_service,
.mega-menu .dropdown_aboutus, .mega-menu .dropdown_info, .mega-menu .dropdown_fullwidth {
margin:4px auto;left:-999em;position:absolute;border:0px solid #494949;padding:10px;text-align:left;margin-top: 1px;background: pink;
filter: progidXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, Azure, White);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Azure), to(Pink));-moz-box-shadow:0 8px 6px -6px black, 0px 2px 1px 1px #aaa;-webkit-box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;

}
.mega-menu .dropdown_1column {width: 148px;}
.mega-menu .dropdown_2columns {width: 300px;}
.mega-menu .dropdown_customer_service {width: 605px;}
.mega-menu .dropdown_aboutus {width: 585px;}
.mega-menu .dropdown_info {width: 490px;}

/* bof drop down on mouse hover left aligned */
.mega-menu li:hover .dropdown_1column, .mega-menu li:hover .dropdown_2columns, .mega-menu li:hover .dropdown_customer_service, .mega-menu li:hover .dropdown_aboutus, .mega-menu li:hover .dropdown_info {left:-1px;top:25px;}

.mega-menu li:hover {
filter: progidXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, white, Azure);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(Azure));-moz-box-shadow: 0px 2px 1px 1px #aaa;-webkit-box-shadow:0px 2px 1px 1px #aaa;box-shadow:0px 2px 1px 1px #aaa;}


/* bof drop down on mouse hover right aligned */
.mega-menu li .align_right {/*-moz-border-radius: 20px 0px 20px 20px;-webkit-border-radius: 20px 0px 20px 20px;border-radius: 20px 0px 20px 20px;*/}
.mega-menu li:hover .align_right {left:auto;right:-1px;top:25px;}



/* bof column sizes */
.mega-menu .col_1, .mega-menu .col_2 {display:inline;float: left;position: relative;margin-left: 10px;}
.mega-menu .col_1 {width:148px;}
.mega-menu .col_2 {width:300px;}
.mega-menu .col_cs {width:605px;}
.mega-menu .col_aboutus {width:585px;}
.mega-menu .col_3 {width:485px;}
.mega-menu .col_4 {width:610px;}
.mega-menu .col_5 {width:765px;}
.mega-menu .col_6 {width:920px;}

/* Use the firstcolumn class for the items that stick to the left edge of the dropdown */
.mega-menu .firstcolumn {margin-left: 0; /* Clearing margin & left */clear: left;}

/*bof content*/
.mega-menu p, .mega-menu ul, .mega-menu li, .mega-menu h2, .mega-menu h3 {font-size:18px;line-height:21px;text-align:left;color:#d85d60;}
.mega-menu p {font-size:14px; font-family:'Rambla';line-height:18px;margin:0;margin-bottom:10px;color:#444;}
.mega-menu h2, .mega-menu h3 {border-bottom:1px solid black;margin-top:7px;color:#444;}
.mega-menu h2 {font-size:24px;margin-bottom:18px;padding-bottom:11px;font-weight:normal;}
.mega-menu h3 {font-size:16px;margin-bottom:14px;padding-bottom:7px;font-weight:normal;}
.mega-menu li:hover div a {text-decoration:none;border:none;padding:0;}

/* bof images */
.mega-menu .imgshadow_light {padding:4px;border:0px solid black;margin-top:5px;margin-left:20px;}

/* bof standard lists styles */
.mega-menu li ul {list-style:none;padding:0;margin:0 0 12px 0;}
.mega-menu li ul li {font-size:15px;font-family:'Rambla', Arial, Helvetica, sans-serif;line-height:24px;position:relative;padding-left:3px;margin:0;float:left;text-align:left;width:145px;}
.mega-menu li ul li a {padding:0;font-weight:normal;text-transform:none;color:#444;}
.mega-menu li ul li:hover {/*background:none;*/border:none;padding:0;margin:0;}

/* bof 2 levels drop down */
.mega-menu .levels, .mega-menu .levels ul {/* all lists */padding: 0;margin: 0;list-style: none;}
.mega-menu li:hover .levels a {display:block;}
.mega-menu .levels a {display: block;width: 10em;font-weight:normal;}
.mega-menu .levels a.parent, .mega-menu .levels a.parent:hover {}
.mega-menu .levels li {float: left;width:150px;}
.mega-menu .levels li ul {/* second-level lists*/ position: absolute;border:0px solid #444;background: #efefef;
filter: progidXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, Azure, white);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Azure), to(white));-moz-box-shadow: 0px 2px 1px 1px #aaa;-webkit-box-shadow:0px 2px 1px 1px #aaa;box-shadow:0px 2px 1px 1px #aaa;top:-21px;margin:15px 0px 0px 4px;padding:6px;left: -999em;
}

.mega-menu .levels li ul ul {top:-21px;}
.mega-menu .levels li:hover ul ul, .mega-menu .levels li:hover ul ul ul {left: -999em;}
.mega-menu .levels li:hover ul, .mega-menu .levels li li:hover ul, .mega-menu .levels li li li:hover ul {left: 147px;}

/*bof menu colors*/
.menu_red {background: White;height:45px;}
.menu_red li:hover div a {color:#444;}
.menu_red li:hover div a:hover {background-color:#990000;text-decoration:none;background-color:#990000;color:White;text-decoration:none;padding-left:6px;right:3px;}

/*.menu_red li ul li a:hover, .menu_red li selected a {background-color:#990000;color:White;text-decoration:none;padding-left:6px;right:3px;}*/

/*bof customer service*/
.mega-payments{float:left;}
.mega-confidence{float:right;width:60%;}
.mega-about{float:left;width:70%;}
.mega-right{float:right;position: relative;margin-left: 10px;width:145px;}

.down2 {position:relative; top: 3px; padding-right:10px;}

[philip937]

Good day!
recently saw The required information is scattered across very different sources, and we have to spend half the evening for the transition to reference the necessary sites. And here all the instructions you need on a single resource . Try it!
I found hereEveryone has different tastes, but I really liked the site !
Do not waste your precious time , try it now!
Good luck!

how is it that someone that has only posted once can spam the forum with anchor links! Pi55 off loosers

[picaflor-azul]

Hi Anne,
In the mega-menu I have an annoying issue: when I select a subcategory the parent category stays selected (as I want it) and it takes the properties of the main menu when selected (in my case: white to azure, black text). But the text is moved to the left side, so it touches the edges.

Whatever I tried, I cannot get the text in the right position - any change I make that works on these parents, also works on the top level - and that big fat headline moving back and forth 3 px is totally annoying.

I've tried changing the output of the categories generator, but I simply don't know which class or div they are...
Please check the image. I also add the adjusted stylesheet. can you help me out? What I would really like is to make the parent link (but not the head) pink.
Can you help me out? Any help is appreciated!

Just in case the problem is not clear: the parents jump 3 px to the left side, they do not align with the non-selected (and also not with the hovering) text.

.

The stylesheet:

#mega-wrapper {width: 1048px;/*change this to the width of your site*/margin:0 auto;display:block;position: relative;z-index:9999;
margin-bottom:1em; top:-2em;}
#mega-wrapper .mega-menu {padding-left: 10px; width: 1012px;/*set this width to your site width minus 40px*/
background: White;

filter: progidXImageTransform.Microsoft.gradient(startColorstr='White', endColorstr='WhiteSmoke'); /* for IE */
background: -moz-linear-gradient(top, White, WhiteSmoke);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(WhiteSmoke));-moz-box-shadow:0 8px 6px -6px black, 0px 2px 1px 1px #aaa;-webkit-box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;

list-style:none;margin:30px auto 0px auto;height:30px;padding:0px 10px 0px 10px;}

.mega-menu li {float:left;text-align:center;position:relative;margin-right:10px;margin-top:2px;}
.mega-menu li.fullwidth {position: static !important;}
.mega-menu li:hover {background: azure; border:1px solid WhiteSmoke;margin-right:6px;}
.mega-menu li a {color: black /*was White*/;outline:0;padding: 5px 12px 3px 12px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;}
.mega-menu li:hover a {color:#444;position:relative;z-index:11;padding: 4px 11px 3px 11px;}
.mega-menu li:hover div a {display:inline;}
.mega-menu li .drop {font-family:'Montserrat', Arial, Helvetica, sans-serif;padding-right:16px;}
.mega-menu li:hover .drop {padding-right:19px;}
.infoMenu :hover {background: green; color:white;}

/* bof right aligned menu item */
.mega-menu .right {float:right;right:0;margin-right:5px;}
.mega-menu li.right:hover {margin-right:5px;}

/* bof drop down styles */
.mega-menu .dropdown_1column, .mega-menu .dropdown_2columns, .mega-menu .dropdown_3columns, .mega-menu .dropdown_4columns, .mega-menu .dropdown_5columns, .mega-menu .dropdown_customer_service,
.mega-menu .dropdown_aboutus, .mega-menu .dropdown_info, .mega-menu .dropdown_fullwidth {
margin:4px auto;left:-999em;position:absolute;border:0px solid #494949;padding:10px;text-align:left;margin-top: 1px;background: pink;
filter: progidXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, Azure, White);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Azure), to(Pink));-moz-box-shadow:0 8px 6px -6px black, 0px 2px 1px 1px #aaa;-webkit-box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;

}
.mega-menu .dropdown_1column {width: 148px;}
.mega-menu .dropdown_2columns {width: 300px;}
.mega-menu .dropdown_customer_service {width: 605px;}
.mega-menu .dropdown_aboutus {width: 585px;}
.mega-menu .dropdown_info {width: 490px;}

/* bof drop down on mouse hover left aligned */
.mega-menu li:hover .dropdown_1column, .mega-menu li:hover .dropdown_2columns, .mega-menu li:hover .dropdown_customer_service, .mega-menu li:hover .dropdown_aboutus, .mega-menu li:hover .dropdown_info {left:-1px;top:25px;}

.mega-menu li:hover {
filter: progidXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, white, Azure);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(Azure));-moz-box-shadow: 0px 2px 1px 1px #aaa;-webkit-box-shadow:0px 2px 1px 1px #aaa;box-shadow:0px 2px 1px 1px #aaa;}


/* bof drop down on mouse hover right aligned */
.mega-menu li .align_right {/*-moz-border-radius: 20px 0px 20px 20px;-webkit-border-radius: 20px 0px 20px 20px;border-radius: 20px 0px 20px 20px;*/}
.mega-menu li:hover .align_right {left:auto;right:-1px;top:25px;}



/* bof column sizes */
.mega-menu .col_1, .mega-menu .col_2 {display:inline;float: left;position: relative;margin-left: 10px;}
.mega-menu .col_1 {width:148px;}
.mega-menu .col_2 {width:300px;}
.mega-menu .col_cs {width:605px;}
.mega-menu .col_aboutus {width:585px;}
.mega-menu .col_3 {width:485px;}
.mega-menu .col_4 {width:610px;}
.mega-menu .col_5 {width:765px;}
.mega-menu .col_6 {width:920px;}

/* Use the firstcolumn class for the items that stick to the left edge of the dropdown */
.mega-menu .firstcolumn {margin-left: 0; /* Clearing margin & left */clear: left;}

/*bof content*/
.mega-menu p, .mega-menu ul, .mega-menu li, .mega-menu h2, .mega-menu h3 {font-size:18px;line-height:21px;text-align:left;color:#d85d60;}
.mega-menu p {font-size:14px; font-family:'Rambla';line-height:18px;margin:0;margin-bottom:10px;color:#444;}
.mega-menu h2, .mega-menu h3 {border-bottom:1px solid black;margin-top:7px;color:#444;}
.mega-menu h2 {font-size:24px;margin-bottom:18px;padding-bottom:11px;font-weight:normal;}
.mega-menu h3 {font-size:16px;margin-bottom:14px;padding-bottom:7px;font-weight:normal;}
.mega-menu li:hover div a {text-decoration:none;border:none;padding:0;}

/* bof images */
.mega-menu .imgshadow_light {padding:4px;border:0px solid black;margin-top:5px;margin-left:20px;}

/* bof standard lists styles */
.mega-menu li ul {list-style:none;padding:0;margin:0 0 12px 0;}
.mega-menu li ul li {font-size:15px;font-family:'Rambla', Arial, Helvetica, sans-serif;line-height:24px;position:relative;padding-left:3px;margin:0;float:left;text-align:left;width:145px;}
.mega-menu li ul li a {padding:0;font-weight:normal;text-transform:none;color:#444;}
.mega-menu li ul li:hover {/*background:none;*/border:none;padding:0;margin:0;}

/* bof 2 levels drop down */
.mega-menu .levels, .mega-menu .levels ul {/* all lists */padding: 0;margin: 0;list-style: none;}
.mega-menu li:hover .levels a {display:block;}
.mega-menu .levels a {display: block;width: 10em;font-weight:normal;}
.mega-menu .levels a.parent, .mega-menu .levels a.parent:hover {}
.mega-menu .levels li {float: left;width:150px;}
.mega-menu .levels li ul {/* second-level lists*/ position: absolute;border:0px solid #444;background: #efefef;
filter: progidXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, Azure, white);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Azure), to(white));-moz-box-shadow: 0px 2px 1px 1px #aaa;-webkit-box-shadow:0px 2px 1px 1px #aaa;box-shadow:0px 2px 1px 1px #aaa;top:-21px;margin:15px 0px 0px 4px;padding:6px;left: -999em;
}

.mega-menu .levels li ul ul {top:-21px;}
.mega-menu .levels li:hover ul ul, .mega-menu .levels li:hover ul ul ul {left: -999em;}
.mega-menu .levels li:hover ul, .mega-menu .levels li li:hover ul, .mega-menu .levels li li li:hover ul {left: 147px;}

/*bof menu colors*/
.menu_red {background: White;height:45px;}
.menu_red li:hover div a {color:#444;}
.menu_red li:hover div a:hover {background-color:#990000;text-decoration:none;background-color:#990000;color:White;text-decoration:none;padding-left:6px;right:3px;}

/*.menu_red li ul li a:hover, .menu_red li selected a {background-color:#990000;color:White;text-decoration:none;padding-left:6px;right:3px;}*/

/*bof customer service*/
.mega-payments{float:left;}
.mega-confidence{float:right;width:60%;}
.mega-about{float:left;width:70%;}
.mega-right{float:right;position: relative;margin-left: 10px;width:145px;}

.down2 {position:relative; top: 3px; padding-right:10px;}

If you post a link to your site I can take a look.

Thanks,

Anne

[jewelsnpearls]

Hi Anne, it's not a live shop, it's still in the wamp.
Since you made the module, I was hoping you know which div or class controls the display of the parents of a selected sub(sub)(sub) category. It's apparently generated by the module, but I have no clue as to how that works and how to adjust the output of that.

[gjh42]

Rather than have to re-control the parents after your style change, you should specify a selector set that limits the effect to the sub-sub-subcats to begin with. The nested lists have classnames like .level2, .level3, level4, so you could use whichever of those is appropriate as part of the selector to give the desired specificity.

[jewelsnpearls]

Hi gjb42,
I'm just yellow-white belt yet... can you push me a little further in the right direction? I have two places in my CSS that incur the blend from White to Azure, and if I change anything there it either works on the headers upon selecting them, or not at all (at least not noticable)

[picaflor-azul]

Hi gjb42,
I'm just yellow-white belt yet... can you push me a little further in the right direction? I have two places in my CSS that incur the blend from White to Azure, and if I change anything there it either works on the headers upon selecting them, or not at all (at least not noticable)

If you post a link to your site I can take a look.

Thanks,

Anne