サブメニューをブラウザウィンドウの全幅に広げる方法は？

Question

は、私は私のサブメニューが下の画像のように、ブラウザウィンドウの幅いっぱいに広がるようにしたい：私も私のメインメニューが右に浮いてBootstrapを、使用しています

。

これまでに行ったことについてデモを作成しました。この結果はどのように達成するのですか？

http://codepen.io/ifusion/pen/oLVVXj

Answer 1

まず、ブートストラップは、あなたが本当にunflexibleなります。だから、それを使用したい場合は、width:100%;が親に依存しているので、メニューの要素からサブメニューを移動することをお勧めします。したがって、親よりも広い必要があるすべてのものは、この親要素の子であってはなりません。さらに、position:absoluteは、次の親にposition:absoluteまたはposition:relativeと依存しています。だから簡単にはできないことがたくさんあります。サブメニューを移動するともっと簡単になります。そこにはとposition:absoluteをleft:0と使用するだけです。

またあなたがposition:fixedを使用することができ、ページの流れのうち、サブメニューを取得します。そしてwidth:100%。この解決方法は​​3210です。もっと仕事があっても、私は最初のものがもっと好きです。しかし、固定配置にはいくつかの副作用がありますが、重要ではないかもしれません。

Answer 2

まず第一に、それの親要素がposition: relativeを持っているので、サブメニューの幅が制限されています。

これを削除すると、サブメニューは全幅になりますが、アイテムはまだ左に揃えられます。

以下の例では.main-menu-dropdownを使用してdisplay: flexを使用し、その中の項目の中央に配置しました。すべての

http://codepen.io/adrianlynch/pen/RRddjk

.main-menu-dropdown { 
 
    position: absolute; 
 
    left: -15px; 
 
    right: -15px; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    background: black; 
 
}

Answer 3

位置絶対子供が最も近い位置の相対親に対する位置しますので、メインメニュー李のための位置を削除すると、この問題を解決します。また、bodyとhtmlからパディングとマージンを削除します。

body, html{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.main-menu { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    float: right; 
 
} 
 
.main-menu li { 
 
    float: left; 
 
} 
 
.main-menu li a { 
 
    display: block; 
 
    background: #c2c2c2; 
 
    padding: 20px; 
 
    color: #337ab7; 
 
    text-decoration: none; 
 
} 
 

 
.main-menu-dropdown { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    display: block; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    background-color: black; 
 
    text-align: center; 
 
} 
 
.main-menu-dropdown li { 
 
    float: none; 
 
    display: inline-block; 
 
    margin-left: -4px; 
 
} 
 
.main-menu-dropdown li a { 
 
    background: black; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="col-md-12"> 
 
     <ul class="main-menu"> 
 
      <li><a href="#">First item</a></li> 
 
      <li> 
 
       <a class="has-dropdown" href="#">Second Item</a> 
 
       <ul class="main-menu-dropdown clearfix"> 
 
        <li><a href="#">Sub item 1</a></li> 
 
        <li><a href="#">Sub item 2</a></li> 
 
        <li><a href="#">Sub item 3</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Third Item</a></li> 
 
      <li><a href="#">Fourth Item</a></li> 
 
     </ul> 
 
     <div class="col-md-12"> 
 
     I need the sub menu to span the width of the browser 
 
     </div> 
 
    </div> 
 
</div>