How to make DD Mega Menu (.solidblockmenu) 100% width?

[TGGMike]

Hello,

1) Script Title: : DD Mega Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddmegamenu.htm

3) Problem: How can I make the DD Mega Menu (.solidblockmenu) 100% width within the CCS code? Can the .solidblockmenu be set at 100% or just in px? My Website is set at 100% width.

[Nile]

I'm confused with what you're asking. From what I can tell, by default the menu should already be set to 100%. Additionally, if you wanted 100% width, why would you think to set the width in pixels?

Could you be a bit more clear on what you're asking, please? Maybe provide a link to the page where the menu doesn't fill up 100% of its parent container?

[Beverleyh]

Maybe you mean the .megawrapper container that holds the dropdowns? - it is generated in the JavaScript and not specifically declared/referenced in the default CSS.

You can manipulate that in the CSS though if you use the !important override - something like;


.megawrapper { position:absolute !important; top:100px !important; left:0 !important; width:100% !important; }This example makes the dropdowns all come from the absolute left of the screen, 100px from the top, instead of from under each button.

I did something similar for the megamenu that I used in the Fast Edit website http://fast-edit.co.uk/ except I declared a specific px width to match the wrapper of the template. This may or may not point you in the right direction but further clarification and a link, as Nile has already mentioned, would be the best way to offer you specific help.

[TGGMike]

Thanks Nile and Beverleyh,

I wanted the website horizontal navigation menu bar to be 100% in width because the entire website width was 100% in width. By default, the navigation menu bar for some reason did not reach across entire screen (100%).

I recently changed the website width to 1100 px. and set the .solidblockmenu to 1100 px. to accomplish something similar to what I wanted (website is not currently set at 100%). I was thinking that the .solidblockmenu can only be set in px and not in percent. Also, I did no set a background when website was set to 100% in width.

I'm going to change the website width back to 100% but would like for the entire navigation menu bar to also be 100% in width. Thanks also for the info on the .megawrapper container.

Main Website:
http://www.thegiftgallerypromo.com/

Example of the website set at 100%; however, links point to main website (I would like for the entire navigation menu bar reach across entire website at 100%).
http://www.distributorcentral.com/websites/CompanyStores/

Here's is the CSS code. A few line are missing because I just wanted to use a simple table in the dropdown. Is there a better way to achieve this? Please excuse any mistakes, I'm new and learning.

/* ######### Shared basic style for mega drop down menu DIV ######### */

.mega{
width:1025px; /*default width of mega menu*/
padding:10px;
position:absolute;
visibility:hidden;
border:2px solid #003366;
border-top-width:1px;
background:#ffffff;
-webkit-box-shadow: 5px 5px 5px #c8c8c8; /*css 3 shadows*/
-moz-box-shadow: 5px 5px 5px #c8c8c8;
box-shadow: 5px 5px 5px #c8c8c8;
}

/* ######### Style for Solid Block Mega Menu ######### */

.solidblocktheme{ /*additional mega drop down menu style for this theme*/
border:2px solid #003366;
padding:0; /*remove default padding inside mega menu*/
}
.solidblocktheme p, .solidblocktheme .column{
padding:6px; /*add padding inside p and .column elements within mega menu*/
width:auto;
}
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 16px Verdana;
width: 1100px;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #003366;
border-width: 1px 1px;
background: #003366 url(blockdefault.gif) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: solid #003366;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li a.selected{ /*Selected Tab style*/
color: white;
background: #ff9900 url(blockactive.gif) center center repeat-x;
}