Horizontal drop down submenu

  • webworks

    (@webworks)


    2 years, 7 months ago

    Hello, The 3rd link, “Day Tours” drops down vertically. I’ve added a class called horizontal-menu to the top link as well as individual sub links, but neither has worked out. Does anyone see what I might need to change? We need it to display like the “Destinations” button on makersairdotcom.

    #horizontal-menu ul {
display: flex;
align-items: stretch;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
}
#horizontal-menu li {
display: block;
flex: 0 1 auto;
list-style-type: none;
}

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    2 years, 7 months ago

    You have the horizontal-menu selector in your CSS as an ID attribute, not a class. Class attribute would be more appropriate. # is for IDs, . is for classes.

    For a sub-menu item, 100% width represents the full width of the parent menu item (Day Tours). At that width a horizontal layout is impossible. Try a different distance unit of measure like width: 80vw; (80% of viewport width) which is not relative to parent elements. You’ll also need a negative left: positioning rule to keep the whole thing on the page.

    Your menu currently has no horizontal-menu class or ID, so none of the related CSS is applied. Aside from the width issue, perhaps your CSS is OK, IDK. However, the current sub-menu items have a clear: both; rule which will prevent items from laying out horizontally. You’ll want an overriding clear: none; rule applied

Viewing 1 replies (of 1 total)

The topic ‘Horizontal drop down submenu’ is closed to new replies.