Question

我正在尝试创建一个超级菜单，该菜单将是#header的宽度，也会居中于中间。标头的最大宽度为1024px。但是，下拉菜单始终保持在父li的边缘。我设法以利润来破解它，但这无论如何都不是永久的解决方案。为了这个问题，我已经删除了边距。

HTML

<header>
    <div id="header">
        <div class="row">
        <div class="medium-3 columns">
        <div id="logo">
            <a href="#"><img alt="logo" src="http://dummyimage.com/174x114/828282/0011ff.png"/></a>
        </div>
        </div>
        <div class="medium-7 columns">
            <ul class="nav clearfix animated">
                <li class="border-half"><a href="#">Home</a></li>
                <li class="border-half">
                    <a href="#">Series</a>
                    <div class="mega-container1">
                        <div style="width: 1000px; height: 290px;"></div>
                    </div>
                </li>
                <li class="border-half"><a href="#">Members</a>
                    <div class="mega-container2">
                        <div style="width: 1000px; height: 290px;"></div>
                    </div>
                </li>
                <li class="border-half">
                    <a href="#">About</a>
                    <div class="mega-container3">
                        <ul style="width: 1000px; height: 290px;">
                            <li><a href="#">Who We Are</a></li>
                            <li><a href="#">Why We Care</a></li>
                            <li><a href="#">Some other page</a></li>
                            <li><a href="#">How We Work</a></li>
                        </ul>
                    </div>
                </li>
                <li class="border-half"><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <div class="medium-2 columns">
        </div>
    </div>
    </div>
</header>

CSS

body {font-size: 16px; background: #cacaca;}
#wrapper{width: 100%; height: 100%; padding: 0; margin: 0; background: #cacaca;}
header {width: 100%; max-height: 7.188em; background: #fff; border-bottom: 0.063em solid $header-border; z-index: 1;}
#header{max-width: 1024px; height: 7.125em; margin: 0 auto; padding: 0; background: #cdecde}
#logo {max-width: 10.875em; max-height: 7.125em; float: left; background: #eee;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.nav {
    background: #cdecde;
    max-width: 500px;
    height: 114px;
}

.nav li { list-style: none;  }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
    float: left;
    color: $body-font-color;
    font-size: $paragraph-font-size;
    text-decoration: none;
    line-height: 114px;
    padding: 0 20px; 
    height: 114px;
    position: relative;
    border-left: 1px solid #fff;
}
.nav > li:hover > a { background: #F7F7F7; border-left: 1px solid #f1f1f1;}
.nav > li:first-child > a {  }
.nav > li:last-child > a { border-right: 0;}
.nav > li:hover > div { display: block; }

/* Mega Dropdown */

.nav > li > div {
    position: absolute;
    top: 114px;
    display: none;
    background: #F7F7F7;
    padding: 10px 10px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    border-bottom: 4px solid $primary-color;
    border-left: 1px solid $header-border;
    border-right: 1px solid $header-border;
    z-index: 2;
    max-width: 1024px;
    height: auto;
    margin: 0 auto;
}

.mega-container1 { 
    left: ;
}
.mega-container2 { 
    left: ;
}
.mega-container3 { 
    left: ;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.border-half {
    border-right: 1px solid #F0F0F0;
    position: relative;
}
.border-half:before {
    border-left: 1px solid #cdecde;
}
.border-half:after {
    content: '';
    display: block;
    position: absolute;
    height: 50px;
    top: 0px;
    right: -1px;
    border: 1px solid #cdecde;
}
.border-half:hover::after {
    right: -3px;
}

这是一个获得这个想法的JSFiddle：http://jsfiddle.net/7e3esmpx/

更新1：解释有点令人困惑。

Answer 1

好吧我觉得我有解决你问题的方法。根据我的理解，你希望隐藏的div在悬停时出现，并占据整个屏幕的宽度。那是对的吗？要做到这一点：

首先将固定位置和左边距0添加到导航栏中。即：

.nav > li:hover > div { display: block;
                        position: fixed;
                        left: 0}

更改导航栏上的最大宽度以包含整个屏幕。即：

.nav > li > div {
position: absolute;
top: 114px;
display: none;
background: #F7F7F7;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
border-bottom: 4px solid $primary-color;
border-left: 1px solid $header-border;
border-right: 1px solid $header-border;
z-index: 2;
max-width: 1800px;
height: auto;
margin: 0 auto;
}

Answer 2

问题是UL有一定的宽度。下拉的大小与UL的大小相同，如果我调整UL的大小，我应该得到相同的宽度。所以任何有类似问题的人都要检查你的UL。

将Mega菜单调整为页面宽度并使其居中

2 个答案: