Question

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

所以看起来更像这样： enter image description here

而不是它在这里的作用： 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））？＆gt;

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

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

无论如何，我建议使用响应宽度，以便菜单总是适合一行。

这可以通过以下方式实现：

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

width: 10%;

每个李。

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

告诉我它是如何工作的，或者你是否需要另一种解决方法。

Answer 2

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

首先删除

标签的背景颜色：Blah，More Blah，Blah Blah等。

background: #00476A;

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

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

检查每个的高度和宽度以根据您的需要进行调整。您必须考虑到这不是一个响应式解决方案。

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

2 个答案: