我有顶级菜单，子菜单列表包含图片和滑块。子菜单以全屏扩展背景，内容转到居中对齐。我不能改变html结构。我尝试设置子菜单但它没有全屏显示。这是screenshot。
这是一个小提琴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: 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>
答案 0 :(得分：2)
希望这是你想要的，要使子菜单全宽，所有孩子都在居中，我删除了任何填充和边距并应用了flex对齐
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>