网格问题

Question

我创建了一个网格。此网格中的每个项目都有一个抽屉菜单，在悬停时向下显示。悬停时发生的事情是下面的所有项目都被推下来，我只想直接下面的项目下推。

此网站的网址：http://esgu.no/dev/unicef/menupage.htm

我的HTML

<div class="grid alef">
        <div class="card w33">
            <img src="assets/3.jpg">
            <div class="orange subm">
                <a href="#">Barns rettigheter</a>
            </div>
            <ul class="acti obord">
                <li><a href="#">Historie</a></li>
                <li><a href="#">Barnas rettigheter i Norge</a></li>
            </ul>
        </div>
        <div class="card w33">
            <img src="assets/3.jpg">
            <div class="pink subm">
                <a href="#">Unicef og barn i verden</a>
            </div>
            <ul class="acti pbord">
                <li><a href="#">Dette er unicef</a></li>
                <li><a href="#">Fakta om barn</a></li>
                <li><a href="#">Barnearbeid</a></li>
            </ul>
        </div>
        <div class="card w33">
            <img src="assets/3.jpg">
            <div class="green subm">
                <a href="#">Unicef-runden</a>
            </div>
            <ul class="acti gbord">
                <li><a href="#">Meld på skolen</a></li>
                <li><a href="#">Bilder fra runden</a></li>
            </ul>
        </div>
        <div class="card w33">
            <img src="assets/3.jpg">
            <div class="lblue subm">
                <a href="#">FN´s bærekraftsmål</a>
            </div>
        </div>
        <div class="card w33">
            <img src="assets/3.jpg">
            <div class="red subm"><a href="#">Til deg som er fadder</a></div>
            <ul class="acti rbord">
                <li><a href="#">Faddertips</a></li>
                <li><a href="#">Faddertesten</a></li>
                <li><a href="#">Fadderquiz</a></li>
                <li><a href="#">Aktivitetshjul</a></li>
                <li><a href="#">Fadderrebus</a></li>
                <li><a href="#">Fadderkryssord</a></li>
            </ul>
        </div>
        <div class="card w33">
            <img src="assets/3.jpg">
            <div class="yellow subm">
                <a href="#">Kryssord og andre nøtter</a>
            </div>
            <ul class="acti ybord">
                <li><a href="#">Kryssord</a></li>
                <li><a href="#">Puslespill</a></li>
                <li><a href="#">Rebus</a></li>
            </ul>
        </div>
        <div class="card w33">
            <img src="assets/3.jpg">
            <div class="dblue subm">
                <a href="#">Du kan</a>
            </div>
        </div>
    </div>

我的网格CSS

.grid{width:100%;margin:0 auto;padding:40px 10%;font-size:0;text-align:center}.grid > li{width:auto;height:auto;padding:0}
.grid > *{display:inline-block;vertical-align:top;width:100%;font-size:14px;font-size:1rem;padding:20px}

Answer 1

我能想到的唯一方法是创建3个UL并将它们向左浮动，每个都有33.3％的宽度。然后每个LI将是100％，彼此堆叠。当您将鼠标悬停在一个上时，它只会降低该UL。

这对您来说可能不是一个有效的解决方案，但可能是一个值得探索的途径！

请参阅此快速示例 - http://codepen.io/conormcafee/pen/MKgdZg

<ul>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
</ul>

<ul>
  <li>Link</li>
  <li>Link<span>Show me</span></li>
  <li>Link</li>
</ul>

<ul>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
</ul>

ul {
    display: block;
    float: left;
    width: 33.3%;
}

li span {
    display: none;
    color: red;
}

li:hover span {
    display: block;
}