Search code examples
cssdrop-down-menumegamenu

My CSS Mega Menu expands from the dropdown selection to the right but not the left?

I made a CSS Mega Menu but I'm having issue with the width of the dropdown. The dropdown part of the menu starts where the parent starts and extends to the right, but not the left. So the first item on my menu's dropwdown extends the width of my layout (since it starts on the left), but the second, third, fourth items' dropdowns (which start in the middle/right) only extend from that parent and to the right. As this is hard to explain, I took some pictures.

This is what I want it to look like. It only looks this way because it is the left most dropdown:

http://i.imgur.com/X2B45tB.jpg

But when I move farther to the right it looks like this:

http://i.imgur.com/AT3T53F.jpg

I want the second picture to expand to the left as well.

Here is my CSS. Since I wasn't able to label the identifiers I commented every section.

#navigation {
    display: list-item;
    text-decoration: none;
    list-style-type: none;
    padding-left: 0px;
}

/* PRODUCTS MEGA MENU */
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer {
    display: none;
    position: absolute;
    height: auto;
    min-height: 400px;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    z-index: 5000;
    float: left;
    padding-left: 5px;
}

 /* PRODUCTS MEGA MENU LINKS */
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer a {
    text-decoration: underline;
    font-weight: bold;
}

/* EDUCATION MEGA MENU SECTION */
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl02_childNodesContainer {
    display: none;
    position: absolute;
    height: auto;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    z-index: 5000;
}

/* SERVICE AND SUPPORT MEGA MENU SECTION */
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl03_childNodesContainer {
    display: none;
    position: absolute;
    float: left;
    height: auto;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    z-index: 5000;
}

/* ABOUT US MEGA MENU SECTION */
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl04_childNodesContainer {
    display: none;
    position: absolute;
    float: left;
    height: auto;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    z-index: 5000;
}

/* HOVER CODE FOR PRODUCTS SECTION */
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover >      #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer {
    display: block;
    background-color: #fff;
    float: left;
}

/* HOVER CODE FOR EDUCATION SECTION */
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover > #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl02_childNodesContainer {
    display: block;
    float: left;
    background-color: #fff;
}

/* HOVER CODE FOR SERVICE AND SUPPORT SECTION */
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover > #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl03_childNodesContainer {
    display: block;
    float: left;
    background-color: #fff
}

/* HOVER CODE FOR ABOUT US SECTION */
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover > #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl04_childNodesContainer {
    display: block;
    float: left;
    background-color: #fff
}

I think I supplied all the code needed... the rest of my CSS pertains to the links within the mega menu.

Solution

  • try left:0 for the child ul

    #navigation>ul
{
...rest of them...    
left:0;
...rest of them...
}