CSS Flyout / Drop down Upsets Other Elements - Do I Wrap It?

Hello all,

I have a quick question! I have a CSS Flyout menu that’s 1 link that on hover opens up to a 3 column wide menu. I add it to the header of my page and it is pushing everything in the header around. I’ve never experienced this before.

Is there a way to wrap it up so it effects nothing else on the page?

Hi EricWatson

I’d love to post the code but it’s not just one menu. I tried the “absolute position” and that got the menu in the right place but I found that the tags were conflicting with another menu. The left nav menu and the header menu use the same CSS code, so I changed the tag names and it stopped most of the css explosion.

So now I have it in the correct place but the header menu bar below it is moving itself upwards into the other section.

The complication is that this is a PHP system with echo statements grabbing data from a content management system, injecting the menu. So the CSS paste really won’t do any good. It’s PHP and CSS which is just far to complicated to figure out what to post. plus I’m sure everyone including yourself would say “oh that’s just too complicated” lol. I wouldn’t bother anyone with that level of intensity!

I do appreciate your post though! It got me 90% of the way through!

Now I just need to figure out why the bar below is riding up! If you want to see that code, here it is! Not css though! The part in red is the part that’s causing the mess!

<div class=“header-container”>
<div class=“header”>
<?php if ($this->getIsHomePage()):?>
<h1 class=“logo”><strong><?php echo $this->getLogoAlt() ?></strong><a href=“<?php echo $this->getUrl(‘’) ?>” title=“<?php echo $this->getLogoAlt() ?>” class=“logo”><img src=“<?php echo $this->getLogoSrc() ?>” alt=“<?php echo $this->getLogoAlt() ?>” /></a></h1>
<?php else:?>
<a href=“<?php echo $this->getUrl(‘’) ?>” title=“<?php echo $this->getLogoAlt() ?>” class=“logo”><strong><?php echo $this->getLogoAlt() ?></strong><img src=“<?php echo $this->getLogoSrc() ?>” alt=“<?php echo $this->getLogoAlt() ?>” /></a>
<?php endif?>
<p class=“top-promo” title="<?php echo $this->(‘Free Shipping on orders over $50’); ?>"><?php echo $this->(‘Free Shipping on orders over 50$’); ?></p>
<?php echo $this->getLayout()->createBlock(“cms/block”)->setBlockId(“cs_nav”)->toHtml() ?>
<?php echo $this->getChildHtml(‘topLinks’) ?>
<div class=“quick-access”>
<?php echo $this->getChildHtml(‘store_language’) ?>
<p class=“welcome-msg”><?php echo $this->getWelcome()?></p>
<?php echo $this->getChildHtml(‘topMenu’) ?>
<?php echo $this->getChildHtml(‘topBar’) ?>
<div class=“hcn-bar”>
<?php echo $this->getLayout()->createBlock(“cms/block”)->setBlockId(“header-cat-nav”)->toHtml() ?>
<?php echo $this->getChildHtml(‘topContainer’); ?>


Thanks again for your contribution. It’s much appreciated! I did solve this! The second menu bar was moving up so I added added a top margin of “margin-top:35px;” (to the section that was moving up / not the part that was the initial challenge) and it appears to work in IE, Firefox and Chrome.

I know that my challenge is unique but maybe someone will be inspired by this resolution…


Just make the flyout AP. Not the whole header. The header height should preserve the space below it (as long as it’s position static - default). To fix the conflicting CSS id each nav and feed the rules like this…

#leftnav li {…} and #headernav li {…}

If the flyout is AP (absolute positioning) it shouldn’t move anything. Post some code…