Mega Menu CSS - Header Menu Push Down Content Below

Question

Mega Menu CSS - Header Menu Push Down Content Below

2.1k Views Asked by scapegoat17 At 04 April 2025 at 09:52

I have created a mega menu with CSS and was looking for a way to have it so that when the user hovers over the main part of the menue, it would push downt the rest of the content below instead of having the mega menu hover over the content.

So look more like this: enter image description here

Instead of how it does here: http://jsfiddle.net/ZwV5K/1/

Here is my html:

<div id="root">
  <div class="header-wrap">
    <div class="header">
      <div class="logo"><a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a></div>
      <div class="menu-wrapper">
            <ul class="nav">
            <li>
                <a href="#">Blah</a>
            </li>
            <li><img src='themes/pavone/files/img/background/nav-border.png' /></li>
        <li>
            <a href="#">More Blah</a>
            <div>
                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>

                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>

                    <h3><a href="#">Blah blah</a></h3>
                </div>
            </div>
            </li>
        <li><img src='themes/pavone/files/img/background/nav-border.png' /></li>
        <li>
            <a href="#">Blah blah</a>
            <div>
                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                    </ul>

                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">More</a></li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                </div>
        <li><img src='themes/pavone/files/img/background/nav-border.png' /></li>
        <li><a href="#">Blah blah</a></li>
        <li><img src='themes/pavone/files/img/background/nav-border.png' /></li>
        <li>
            <a href="#">Blah blah</a>
            <div>
                <div class="nav-column">
                    <h3><a href="#">Blah blahs</a></h3>

                    <h3><a href="#">Blah blah</a></h3>
                </div>

                <div class="nav-column">    
                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blahh</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blahs</a></h3>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                </div>
            </div>
        </li>
    </ul>
</div>
</div>

$main_menu)) ?>

And here is my CSS:

.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}

.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 100%; margin: 0 auto; font-family: ariel;}

.header-wrap { height: 100px; background: #00476A repeat-x;}
.nav-wrap { height: 70px; background: grey; border-top: 1px solid #DBDDC0; border-    bottom: 1px solid #D9DBCE}
.body-wrap { background: #AACBFF; padding-top:30px; padding-bottom:30px;}
.footer-wrap { background: rgba(255,255,255,.8); position:fixed; left:0px; bottom:0px;     height: 90px;}

.header .logo { float: left; margin-top: 30px;}
/* Menu Container */
.menu-wrapper { float: right; margin-top: 25px; width: 75%}
.nav { display: inline-block; position: relative; cursor: default; z-index: 500;     float:right;}
/* Menu List */
.nav > li { display: block; float: left; background: #00476A; }
.nav li img { padding-top: 15px; padding-bottom: 12px; }
/* Menu Links */
.nav > li > a { position: relative; display: block; z-index: 510; height: 54px;     padding: 0 20px; line-height: 54px; text-decoration:none; font-family: Helvetica,     Arial, sans-serif;
            font-size: 13px; color: #ffffff; text-shadow: 0 0 1px     rgba(0,0,0,.35); background: #00476A; }
.nav li a:hover { color: #70D5FE}
.nav > li:first-child > a { border-radius: 3px 0 0 3px; border-left: none; }
/* Menu Dropdown */
.nav > li > div { position: absolute; display: block; width: 100%; top: 50px; left: 0;     opacity: 0; visibility: hidden; overflow: hidden; background: #00476A; border-radius: 0 0     3px 3px; }
.nav .nav-column ul { list-style: none;}
.nav .nav-column ul li { margin-left:-40px; text-decoration:none; margin-bottom:-5px;}
.nav .nav-column ul li a { text-decoration:none; font-size:11px;}
.nav > li:hover > div { opacity: 1; visibility: visible; overflow: visible; }
/* Menu Content Styles */
.nav .nav-column { float: left; width: 130px; padding-top: 30px; padding-left:     10px; padding-right: 10px; }
.nav .nav-column h3 { margin: 10px 0 0 0; font-family: Helvetica, Arial, sans-serif;     font-size: 11px; color: #70D5FE; }
.nav .nav-column h3 a { color: #70D5FE; text-decoration: none; }
.nav .nav-column li a { display: block; line-height: 26px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #ffffff; }    
.header .phone { float: right; font-size: 25px; color: #2C6899; font-weight: bold; text-shadow:1px 1px 3px #FFFFFF;}

#edit-custom-search-blocks-form-1--2 { height: 25px; padding-left: 5px;}
#custom-search-blocks-form-1 { margin-top: 20px; margin-right: 325px; }
.nav .search { float: right; position:inheret;}
.nav li {display: inline;}
.nav a {float: right; font-size: 17px; padding-right: 40px; padding-top: 10px; color: #4A4A48; text-decoration: none; }    
.nav a:hover { }
.nav li a.active { float: right; font-size: 17px; margin-top: 0px; color: #4A4A48;         text-decoration: none; }

You can probably see the HTML and CSS code better on my jsfiddle page. Any kind of help/information would be much appreciated! Thank you!

Original Q&A

There are 2 best solutions below

**tomascharad** · Answer 1

That is because the width of the menu doesn't fit the fiddle. If you add more width to the screen it will work as you want (I'm attaching my screenshot).

Anyway, I would suggest using responsive width so the menu would always fit in one row.

This can be achieved as this:

You have nine li tags, so the width would be 1/9= 0.11 = 11%, but i prefer leaving extra space. So I would suggest:

width: 10%;

For each li.

If you shrink the window to much the text will not fit as well. You can lock the behaviour of the parent divs using media queries.

Tell me how it works or if you need another workaround.

**tomascharad** · Answer 2

Ok, given your comment, this may be useful:

First take away the background color of the

tags: Blah, More Blah, Blah Blah, etc..

background: #00476A;

Then add this css to each of the parent divs of the .nav-columns divs (the one that contains the columns and hasn't any class or id):

position: relative;
width: 723px;
height: 300px;
top: 147px;

Check height and width for each of them to adjust to your needs. You have to consider that this is not a responsive solution.

Mega Menu CSS - Header Menu Push Down Content Below

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in MEGAMENU

Trending Questions

Popular # Hahtags

Popular Questions