3rd tier drop down menu overlaps 2nd tier

  • Resolved plant123

    (@plant123)


    12 years ago

    Hello

    (FYI- I am new to website design…)

    For the second tier drop down menu I increased the length of each row to accommodate for longer titles (and avoid text wrap)
    But now when I use those second tier menu items as parent pages the third tier menu overlaps the parent page title. This is really hard for me to explain..so here is an example:

    https://www.virtuesofhealing.com

    hover over ‘EDUCATION” –> “HERBALISM AND AYURVEDA”—> ‘MENTORSHIPS’ AND ‘5-MONTH PROGRAM’ show up, but overlapping ‘HERBALISM AND AYURVEDA’.

    I can’t figure out the css line to start with or what kind of command would even make it shift right. I would like to get ‘MENTORSHIPS’ AND ‘5-MONTH PROGRAM’ to line up with the end of “HERBALISM AND AYURVEDA”‘, not overlap

    my theme is ‘nonprofit’ through ‘Organic Themes’

    thanks for your help!!!

    I think the right css is somewhere in here?:
    [CSS code moderated – you’ve already linked your website, you needn’t post the CSS]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you tried this?

    ul.menu li li:hover ul,
ul.menu li li.sfHover ul {
 left: 283px;
}

    Thread Starter plant123

    (@plant123)

    goodness me! thank you so much. worked like a charm.

    Could you also tell me how to center the main menu? I can’t seem to figure that out either. (or should I ask the question in another post?)

    thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try this;

    .menu ul {
 display: table;
 margin: 0 auto;
}

    Thread Starter plant123

    (@plant123)

    bravo!
    2 for 2. thanks for your support!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘3rd tier drop down menu overlaps 2nd tier’ is closed to new replies.