Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #25610

    Hi – I’m having an issue with the styling of the dropdown menu. I have modified the main menu’s height and now the dropdown menu needs to also be adjusted but I cannot determine what to edit.

    The site is located at

    The About Us menu item has a dropdown. I would like to move it so it lines up at the base of the main menu and does not “jump” when hovered and adjust the color when hovered.





    How did you increase the size of the menu?

    You can use this code to move the submenu position.

    .main_menu .menu ul {
    top: 43px;




    Thanks – that worked but caused something new… if you click on a drop-down menu item, once on that page the dropdown menu has an alignment issue.

    This is the code I am using the modify the menu:

    .header_color.container_wrap_menu {

    background: url(“”) !important;

    height: 55px;


    .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a {

    color: #000000 !Important; height: 62px;

    line-height: 67px;

    margin-top: -20px;

    font-size: 15px;}

    .header_color .main_menu ul:first-child > li a:hover, .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, .header_color .main_menu ul:first-child > > a {

    color: #ffffff !important;border: none;

    background: #393939;

    height: 62px;

    line-height: 67px;

    font-size: 15px;


    .main_menu .menu ul {

    top: 43px;


    Thanks for your help!



    Please try following code instead

    .main_menu .menu > ul {
    top: 43px;

    Best regards,



    Thanks Dude! Really appreciate the help!


    Glad that Dude set you straight.



Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Dropdown Menu Styling Issue’ is closed to new replies.