Member Avatar for lavachickie

I am trying to integrate the Spry Menu Bar into an existing site design with a boatload of CSS. So I'm SOOOOO close...

The submenu for the third item in the nav (the only entry which will have a submenu right now) displays in the wrong place. For the life of me I can't figure out how to move it down!

The page w/ the issue is here (mouse over "solutions for you"):

http://www.tysonwooters.com/flyout-sample.html

The file's css sheets involved are:

http://www.tysonwooters.com/css/layout.css
http://www.tysonwooters.com/SpryAssets/sprymenubarhorizontal.css

I was a good site designer back around 2002... then I spent a few years doing something else, and let me tell you, learning to design with css is kickin' my butt! =-)

THANKS for your help.

  • 2 Contributors
  • 3 Replies
  • 109 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

Short diagnosis and practical checks based on the thread: the Spry submenu is absolutely positioned, and an existing stylesheet rule from the site (likely in the layout.css or a wrapper element) is making the submenu anchor to the wrong ancestor. 's remark about Dreamweaver adding separate Spry assets is relevant — the final position comes from whichever stylesheet and selector actually wins, and from which ancestor is treated as "positioned" (not static).

A reliable way to confirm the cause is to inspect the live DOM while the submenu is visible: use the browser inspector (Elements panel) to check the submenu element's computed position, top, left and the nearest parent with position other than static. The CSS position rules determine which ancestor an absolutely positioned element is anchored to; see the MDN reference on CSS position.

Common fixes that resolve this type of misplacement:

  • Make the intended menu container the positioned ancestor (add position: relative to the top-level menu wrapper or the top-level li), or
  • Explicitly force the submenu to appear below its parent by setting top: 100% on the submenu selector, and ensure those rules load after Spry's stylesheet or use higher specificity.

Example (override placed after Spry CSS):

/* make a stable positioned anchor and drop the flyout below */
.MenuBarHorizontal > li { position: relative; }
.MenuBarHorizontal li ul { position: absolute; top: 100%; left: 0; }

Other important checks: look for overflow: hidden or unexpected z-index on parent elements (these can clip or hide flyouts), and confirm the override stylesheet is linked after the Spry stylesheet so the changes take effect without relying on !important. Editing the Spry CSS directly or adding a small override near the end of the main stylesheet usually fixes the vertical placement.

Member Avatar for MJ Pieterse

as soon as you insert a spry item into your site, dreamweaver creates another Spry Java file for you. you would have to adjust all your styles in that file for it to take affect.

Member Avatar for lavachickie

Thanks for pointing that out -- I'll dig around a bit taking off from that tip.

Member Avatar for MJ Pieterse

no problem. hope you sort it out!

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.