html - 在 codepen 中内联显示 div，但在浏览器中不起作用

Question

我正在尝试创建一个多列下拉菜单，但我无法弄清楚为什么列的高度不同。第一个完全适合父 div，其他的则不适合。我还注意到在 codepen 中没有任何显示问题，使用相同的代码，而在我的浏览器中不起作用。你可以在 codepen 中看到它应该是怎样的: https://codepen.io/anon/pen/bxgQrL与实际情况:https://ibb.co/fZLUkK . 任何帮助将不胜感激。

.dropdown ul {
  list-style-type: none;
}

.col {
  display: inline-block;
  height: 100%;
  width: 20%;
  margin: 0px;
  border-bottom: 1px solid black;
}

.dropdown {
  display: inline-grid;
  grid-template-columns: repeat(5, 1fr);
  background-color: white;
  text-transform: uppercase;
  height: 300px;
  width: 70%;
  padding: 0;
}

.dropdown a {
  font-size: 0.5em;
}

.sale {
  background-color: #ee2b53;
  color: white;
  /*background-image: url(https://images3.nike.com/is/image/DotCom/PHN_PS/1U646_137_C_PREM/converse-chuck-taylor-monochrome-high-top-unisex-shoe.png?fmt=png-alpha);*/
  width: 100%;
}

<div class="dropdown">
  <div class="col woman">
    <h4>Donna</h4>
    <ul>
      <li><a href="#">Vedi Tutto</a></li>
      <li><a href="#">Sneakers &amp slip-on</a></li>
      <li><a href="#">Ballerine &amp flats</a></li>
      <li><a href="#">Mocassini &amp stringate</a></li>
      <li><a href="#">Décolleté</a></li>
      <li><a href="#">Stivaletti</a></li>
      <li><a href="#">Abbigliamento &amp borse</a></li>
      <li><a href="#">Capsule Limited edition</a></li>
    </ul>
  </div>
  <div class="col man">
    <h4>Uomo</h4>
    <ul>
      <li><a href="#">Vedi Tutto</a></li>
      <li><a href="#">Sneakers</a></li>
      <li><a href="#">Mocassini &amp slip-on</a></li>
      <li><a href="#">Stivali</a></li>
      <li><a href="#">Giacche</a></li>
    </ul>
  </div>
  <div class="col child-f">
    <h4>Bimba</h4>
    <ul>
      <li><a href="#">Vedi tutto</a></li>
      <li><a href="#">Baby</a></li>
    </ul>
  </div>
  <div class="col child-m">
    <h4>Bimbo</h4>
    <ul>
      <li><a href="#">Vedi tutto</a></li>
      <li><a href="#">Baby</a></li>
    </ul>
  </div>
  <div class="col sale">
  </div>
</div>

提前致谢

Answer 1

无法让网格列工作，但是设置它

 display: -ms-inline-flexbox;
 display: inline-flex;

和移除

grid-template-columns: repeat(5, 1fr);

似乎可以胜任。