Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Sub-menu and padding

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #149775
    arnolfo
    Participant

    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

    #149777
    jurotek
    Participant

    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;
    }
    
    #149779
    arnolfo
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.