调整兆丰菜单的页面宽度并居中

我正在尝试制作一个巨大的菜单，它将是#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：解释是有点混乱。

来源

2015-04-14 Dzoni

好吧我想我有一个解决您的问题。根据我的理解，您希望隐藏的div在徘徊时出现，并占用整个屏幕的宽度。那是对的吗？要做到这一点：

首先将固定位置和左边距为0的位置添加到您的导航li div时，他们是徘徊。即：

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

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

.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; 
}

来源

2015-04-14 18:10:03

我很抱歉如果我没有解释得很好。我想要的是隐藏的div是#header的宽度，所以如果#header是1024px，隐藏div的最大宽度应该是1024px，隐藏div应该在屏幕中间。 – Dzoni

我正在寻找一种方法来做到这一点。不是那么容易（对我来说至少大声笑）我可能会研究硬编码隐藏的div在它的永久位置，然后使用JavaScript来拉动悬停的每个锂的动态内容。你会喜欢使用JavaScript的想法，还是你想坚持HTML和CSS？ –

我很高兴我不是唯一对此感到困惑的人。那么...这个导航必须神奇地缩小到手机的大小。所以我更喜欢CSS/HTML，但是如果没有选择，我想我可以做JS ......我确实设法锁定它，但是在特定的窗口大小下面，然后回到绘图板。 – Dzoni

问题是UL有一定的宽度。下拉与UL的尺寸相同，这意味着如果我调整UL，我应该得到相同的宽度。所以任何有类似问题的人，请检查您的UL。

来源

2015-05-19 14:29:06 Dzoni

调整兆丰菜单的页面宽度并居中

回答

相关问题