html - 网格问题

Question

我创建了一个网格。此网格中的每个元素都有一个抽屉菜单，在悬停时向下显示。悬停时发生的是下面的所有元素都被推下，我只希望直接在下面的元素被推下。

此站点的 URL: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;
}