[Solved] Sub-menu and padding

[arnolfo]

I’ve built a sub-menu based on a “tutorialzine.com” drop down menu. However i wanted to alter the sup menu to be the same width of the parent width. Each parent is a different width with padding filling out the hover background color. I set the menu this way because one of the menu items are really long. I’ve based the code on percentages and 2 of 3 submenu look fine-the third will not expand the width of its parent. Any suggestions would be great, please.

Below is my code followed by an example of the site.

` .navMain { width: 916px; height: 40px; margin: 0 auto 0 auto; text-align: center; background-color:#0c293a;

}

/* styling the main nav*/

.navMain > ul > li{ /* will style only the top level li due to the “>” */ list-style: none; display: inline-block; position:relative;

}

.navMain > ul > li > a{ font-family: ‘Cinzel’; font-weight:normal; font-style: normal; color: #FFF; font-size: 20px; text-decoration: none !important; display: block; padding: 7px 22px 6px 22px;

}

.navMain > ul > li:hover{ background-color: #025578;

}

.navMain li ul{ position:absolute; list-style:none; text-align:center; width: inherit; left:50%; margin-left:-50%; top:17px; font:16px ‘Cinzel’, serif; font-weight:normal; /* This is important for the show/hide CSS animation */ max-height:0px; overflow:hidden;

-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;

}

.navMain li:hover ul{ max-height:500px; }

.navMain li ul li{ background-color:rgba(2,85,120,1);

}

.navMain li ul li a{ padding:9px 6px; color:#fff !important; text-decoration:none !important; display:block; }

.navMain li ul li:nth-child(odd){ /* zebra stripes */ border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #0D76A7; border-bottom-color: #0D76A7; }

.navMain li ul li:hover{ background-color:#444; }

.navMain li ul li:first-child{ border-radius:0px 0px 0 0; margin-top:25px; position:relative; }

.navMain li ul li:last-child{ border-bottom-left-radius:6px; border-bottom-right-radius:6px; background-image:url(images/navBot.gif); background-repeat:no-repeat; background-position:top; background-color:#0376a6; height:40px;

}

.navMain .donateBtn {background-color:#0376a6; border-radius:9px; -webkit-border-radius:9px; border-style:solid; border-width:1px; border-color:#0376a6; padding:0px 9px; box-shadow: 0px 0px 6px rgba(0,0,0,.75); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.75); -moz-box-shadow: 0px 0px 6px rgba(0,0,0,.75);

}

.navMain a:hover.donateBtn{ background-color:#319ac5; box-shadow: 0px 0px 6px rgba(255,255,255,.75); -webkit-box-shadow: 0px 0px 6px rgba(255,255,255,.75); border-style:solid; border-width:1px; border-color:#FFF; }

/* styling the banner*/`

http://arnolfodesign.com/clients/GMS/Templates/GlenmMarySisters.dwt

[jurotek]

Try this

.navMain li ul{
position:absolute;
list-style:none;
text-align:center;
width:100%;
left:-40px;
top:16px;
font:16px ‘Cinzel’, serif;
font-weight:normal;
/* This is important for the show/hide CSS animation */
max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
}

[arnolfo]

Jurotek,

Thank you. You’ve shown me what I missed there.

width 100%

and If I take out the ‘margin-left:50%’, and change the the ‘left:-40’ to ‘left:0’ it all works like I want it to.

-a

[Author]

Posts