Member Avatar for fcvolunteer

I've made a nav menu for my site but I've now been asked to turn it into a dropdown menu. I'd like to make it a horizontal submenu and after giving it a try on my own I found a wysiwyg program that lets you design it and spits out the code.

Problem is, I'd like to put it into my existing site and I obviously don't want it to be a stand-alone page. The way my site is currently set up it pulls the header in from an .asp file using

<!--#include virtual="incTopbike.asp"-->

I tried to add the new menu code to that .asp file but the submenu wasn't showing up as a horizontal submenu.

How do I add it to my website which can be ?

Any help is much appreciated,

Thanks!

  • 1 Contributor
  • 2 Replies
  • 97 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fcvolunteer

Dani AI

Generated

Brief update and practical notes based on ’s followup (and the credit to @oVTech): the visible "jump" happens because the submenu was still influencing document flow. The reliable fix is to render the flyout outside the normal flow and anchor it to a positioned ancestor, then align it explicitly so it does not push surrounding items when revealed.

A compact, copy-pasteable pattern (adapt selectors to match your markup):

/* keep the nav as the positioning context */
nav#main { position: relative; }

/* pull the nested list out of the flow and place it just below its parent */
nav#main ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  display: none;
}

/* reveal on hover */
nav#main li:hover > ul { display: block; }

/* anchors as blocks to avoid line-height/margin shifts */
nav#main a { display: inline-block; }

Quick troubleshooting checklist if the menu still jumps:

  • Inspect computed styles with DevTools to see which element’s height changes on hover (margins on anchors or line-height often cause jumps).
  • Ensure the container you expect to anchor to actually has position set (otherwise the absolute child will use the page root).
  • Reset default ul/li margins and paddings to a predictable baseline.
  • Use z-index on the submenu if it gets hidden behind other content.
  • For touch devices, replace pure hover behavior with a click/tap toggle so the submenu does not flicker.

Accessibility and integration tips:

  • Put navigation CSS in the site stylesheet (not duplicated across includes) and include only the nav markup in the server-side include.
  • Add ARIA attributes and keyboard handling per the WAI-ARIA menu pattern for proper keyboard support: see the ARIA authoring practices (WAI-ARIA Menu Pattern).
  • Read up on positioning if unfamiliar: CSS position.
Member Avatar for fcvolunteer

Ok, so after much continued searching on the good ol' web I found an easy tutorial to help me make my menu with a horizontal submenu. My only problem now is that the dropdown submenu is making the parent menu jump when it gets hovered over. Here's what it

And here's the way I'd

Can someone help me fiddle with the css to get it to behave properly?

Member Avatar for fcvolunteer

In case anyone was following this post and wants the solution, here it is:

#navbar {
    float: right;
    margin-top: 40px;
    padding: 0;
    position: relative;
    right: 0;
    top: 0;
    width: 681px;
}


#navbar li ul {
    display: none;
    position: absolute;
}

Thanks to oVTech from a different Forum (not trying to be obnoxious by referencing another forum, just trying to give credit where its due)

Edited by fcvolunteer because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.