電網問題

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