电网问题

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; 
}