全屏宽度的子菜单

时间：2017-08-23 11:27:25

标签： html css submenu

我有顶级菜单，子菜单列表包含图片和滑块。子菜单以全屏扩展背景，内容转到居中对齐。我不能改变html结构。我尝试设置子菜单但它没有全屏显示。这是screenshot。

这是一个小提琴link

以下是我的代码：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 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>

相关问题
最新问题