html - Mega Menu CSS - 标题菜单下推内容

Question

我已经用 CSS 创建了一个超级菜单，并且正在寻找一种方法来获得它，以便当用户将鼠标悬停在菜单的主要部分上时，它会将下面的其余内容向下推，而不是将超级菜单悬停在内容。

所以看起来更像这样：

而不是它在这里的作用：http: //jsfiddle.net/ZwV5K/1/

这是我的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)) ?>

这是我的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; }

您可能可以在我的 jsfiddle 页面上更好地看到 HTML 和 CSS 代码。任何帮助/信息将不胜感激！谢谢！

Answer 1

好的，鉴于您的评论，这可能很有用：

先去掉背景色

标签： Blah, More Blah, Blah Blah, etc..

background: #00476A;

然后将此 css 添加到 .nav-columns div 的每个父 div（包含列且没有任何类或 id 的那个）：

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

检查每个人的高度和宽度以适应您的需要。您必须考虑到这不是响应式解决方案。

Answer 2

那是因为菜单的宽度不适合小提琴。如果您在屏幕上添加更多宽度，它将按您的意愿工作（我附上我的屏幕截图）。

无论如何，我建议使用响应式宽度，以便菜单始终排成一行。

这可以这样实现：

你有九个 li 标签，所以宽度是 1/9= 0.11 = 11%，但我更喜欢留出额外的空间。所以我建议：

width: 10%;

对于每一里。

如果将窗口缩小到太多，文本也将不适合。您可以使用媒体查询锁定父 div 的行为。

告诉我它是如何工作的，或者您是否需要其他解决方法。