Drop down menu aligned to left

Question

I was working on this site and added the header menu with drop downs. The third menu item WINDOWS SUPPORT sub menus are aligned to the left while others are aligned to to the center of the dropdown.I have edited the css to

.sub-menu li a {

text-align: center;
}

but the dropdown area is aligned to the right compared to others.Please help me in making it align correct.Thanks!!

Answer 1

i checked your site. just add these two classes in your css. it will resolve the problem.

#mainmenu .menu-item-292 ul
{
 left:-15px;
}

#mainmenu .menu-item-292 li
{
 padding-left:15px !important;
}

Answer 2

watch your css file and remove this 2 lines

#mainmenu .menu-item-291 a{margin-right:15px;}
#mainmenu .menu-item-292 a{margin-left:-16px;} 

If you want to make more space use padding and border-box:box-sizing

Answer 3

You have

   #mainmenu .menu-item-292 a {
        margin-left: -16px;
    }

It's pulling over both the "Windows Support" anchor, and all anchors below it.

Answer 4

Try this

Add margin-left: 0; css for given anchor tags into your style.css file I guess at line no. 383

#header #mainmenu ul.children li a, #header #mainmenu .sub-menu li a {
    color: #FFFFFF;
    font-family: 'menu-font' !important;
    font-size: 13px !important;
    padding: 5px 20px;
    text-align: left;
    text-transform: uppercase;
    margin-left: 0;
}

I hope this solves your problem!