フルスクリーン幅のサブメニュー

Question

私は、画像とスライダーを含むサブメニューのトップメニューを持っています。サブメニューは背景をフルスクリーンで拡大し、コンテンツは中央揃えになります。私はhtml構造を変更することはできません。サブメニューを設定しようとしましたが、フルスクリーンで表示されません。ここにはscreenshotがあります。私は、これは内部の中心にすべての子供たちと一緒にサブメニュー全幅を作るために、あなたが望んでいる

header { 
 
    border-bottom: 1px solid #000; 
 
} 
 
.menu { 
 
    margin:0; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
.menu li { 
 
    float: left; 
 
} 
 
.menu li .submenu{ 
 
    display: none; 
 
} 
 
.menu li a { 
 
    color: #000; 
 
    padding:10px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    position: relative; 
 
    } 
 
    .menu li a:hover{ 
 
    color:#999; 
 
    } 
 
    .menu > li > a::before { 
 
    border-left: 13px solid transparent; 
 
    border-right: 13px solid transparent; 
 
    border-top: 13px solid #fff; 
 
    bottom: -13px; 
 
    content: ""; 
 
    display: none; 
 
    height: 0; 
 
    left: 50%; 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
    width: 0; 
 
    z-index: 2; 
 
} 
 
.menu > li > a::after { 
 
    border-left: 13px solid transparent; 
 
    border-right: 13px solid transparent; 
 
    border-top: 13px solid #000; 
 
    bottom: -14px; 
 
    content: ""; 
 
    display: none; 
 
    height: 0; 
 
    left: 50%; 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
    width: 0; 
 
    z-index: 1; 
 
} 
 
.menu li:hover a::before, .menu li:hover a::after { 
 
    display: block; 
 
} 
 
.menu li:hover .submenu { 
 
    display: block; 
 
} 
 
.submenu { 
 
    background: #ebf2f2; 
 
    left: 0; 
 
    min-height: 300px; 
 
    padding: 24px 30px 36px; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 41px; 
 
    transition: all 0.3s linear 0s;  
 
} 
 
.submenu ul li { 
 
    display: inline-block; 
 
    float: none; 
 
    line-height: 1; 
 
    margin: 0; 
 
    padding: 2px 0; 
 
    vertical-align: middle; 
 
} 
 
.submenu ul li span{ 
 
    display:block; 
 
    margin-top:5px; 
 
} 
 
.logo { 
 
    margin: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<header> 
 
<div class="container"> 
 
    <div class="col-sm-4"> 
 
    <ul class="menu"> 
 
     <li><a href="#">Menu 1</a> 
 
     <div class="submenu"> 
 
      <ul class="prod-section"> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Shop All</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Photo</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Art</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Type</span></a></li> 
 
      </ul> 
 
     </div> 
 
     </li> 
 
     <li><a href="#">Menu 2</a> 
 
     <div class="submenu"> 
 
      <ul class="prod-section"> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Shop All</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Shoes</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Clothes</span></a></li> 
 
      </ul> 
 
     </div> 
 
     </li> 
 
     <li><a href="#">Menu 3</a> 
 
     <div class="submenu"> 
 
      <ul class="prod-section"> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Shop All</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Toys</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Art</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Type</span></a></li> 
 
      </ul> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <h1 class="logo"> Logo </h1> 
 
    </div> 
 
</div> 
 
</header>

Answer 1

希望：ここ

はフィドル以下 link

であることは私のコードです任意のパディングとマージンを除去し、フレックスアライメントを適用しました

header { 
 
    border-bottom: 1px solid #000; 
 
} 
 
.menu { 
 
    margin:0; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
.menu li { 
 
    float: left; 
 
} 
 
.menu li .submenu{ 
 
    display: none; 
 
} 
 
.menu li a { 
 
    color: #000; 
 
    padding:10px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    position: relative; 
 
    } 
 
    .menu li a:hover{ 
 
    color:#999; 
 
    } 
 
    .menu > li > a::before { 
 
    border-left: 13px solid transparent; 
 
    border-right: 13px solid transparent; 
 
    border-top: 13px solid #fff; 
 
    bottom: -13px; 
 
    content: ""; 
 
    display: none; 
 
    height: 0; 
 
    left: 50%; 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
    width: 0; 
 
    z-index: 2; 
 
} 
 
.menu > li > a::after { 
 
    border-left: 13px solid transparent; 
 
    border-right: 13px solid transparent; 
 
    border-top: 13px solid #000; 
 
    bottom: -14px; 
 
    content: ""; 
 
    display: none; 
 
    height: 0; 
 
    left: 50%; 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
    width: 0; 
 
    z-index: 1; 
 
} 
 
.menu li:hover a::before, .menu li:hover a::after { 
 
    display: block; 
 
} 
 
.menu li:hover .submenu { 
 
    display: flex; 
 
} 
 
.submenu { 
 
    background: #ebf2f2; 
 
    left: 0; 
 
    min-height: 300px; 
 
    width: 100%; 
 
    position: absolute; 
 
    text-align: center; 
 
    justify-content: center; 
 
    align-items: center; 
 
    top: 41px; 
 
    transition: all 0.3s linear 0s;  
 
} 
 
.submenu ul { margin: 0; padding: 0;} 
 
.submenu ul li { 
 
    display: inline-block; 
 
    float: none; 
 
    line-height: 1; 
 
    margin: 0; 
 
    padding: 2px 0; 
 
    vertical-align: middle; 
 
} 
 
.submenu ul li span{ 
 
    display:block; 
 
    margin-top:5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<header> 
 
<div class="container"> 
 
    <ul class="menu"> 
 
    <li><a href="#">Menu 1</a> 
 
     <div class="submenu"> 
 
     <ul class="prod-section"> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Shop All</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Photo</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Art</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Type</span></a></li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li><a href="#">Menu 2</a> 
 
     <div class="submenu"> 
 
     <ul class="prod-section"> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Shop All</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Shoes</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Clothes</span></a></li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li><a href="#">Menu 3</a> 
 
     <div class="submenu"> 
 
     <ul class="prod-section"> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Shop All</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Toys</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Art</span></a></li> 
 
      <li><a href="#"><img src="http://via.placeholder.com/136x166"><span>Type</span></a></li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div> 
 
</header>