在導航欄中懸停時填充頂部元素

Question

我試圖在懸停元素ul#top li a上嘗試padding-top，但它無法執行代碼，也許內嵌塊顯示正在打擾填充顯示，但我不知道任何其他顯示幫助他是內聯的，並且能夠讓他填充頂部。因爲我的目標是不可理解的，我試圖在懸停到頂部（大約5px填充）時填充「a」標籤。

這是我的CSS代碼：

ul#top{ 
     list-style: none; 
} 
ul#top li{ 
     display: inline-block; 
     padding-right: 30px; 
} 
ul#top li a{ 
     color: white; 
     text-decoration: none; 
     font-family: "Comic Sans MS", cursive, sans-serif; 
     -webkit-transition: color 0.5s ease-out; 
     -moz-transition: color 0.5s ease-out; 
     -o-transition: color 0.5s ease-out; 
     transition: color 0.5s ease-out; 
} 
ul#top li a:hover{ 
     padding-top: 10px; 
     color: green; 
} 

我的HTML：

<div class="header"> 
    <div class="menu"> 
    <ul id="top"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">test</a></li> 
     <li><a href="#">test</a></li> 
     <li><a href="#">test</a></li> 
     <li><a href="#">test</a></li> 
    </ul> 
</div> 
</div> 

如何啓用inline-block的顯示填充頂？ （內聯塊可能不是問題，但我認爲是）

Answer 1

您可以添加bottom: 10px而不是position: relative。另外一個問題添加padding-bottom懸停：

ul#top { 
 
    list-style: none; 
 
} 
 
ul#top li { 
 
    display: inline-block; 
 
    padding-right: 30px; 
 
} 
 
ul#top li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    font-family:"Comic Sans MS", cursive, sans-serif; 
 
    -webkit-transition: color 0.5s ease-out; 
 
    -moz-transition: color 0.5s ease-out; 
 
    -o-transition: color 0.5s ease-out; 
 
    transition: color 0.5s ease-out; 
 
} 
 
ul#top li:hover a { 
 
    position: relative; 
 
    padding-bottom: 10px;/*Add padding bottom*/ 
 
    color: green; 
 
    bottom: 10px;/*Add bottom 10px*/ 
 
} 
 
body { 
 
    background: red; 
 
}

<div class="header"> 
 
    <div class="menu"> 
 
     <ul id="top"> 
 
      <li><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#">test</a> 
 
      </li> 
 
      <li><a href="#">test</a> 
 
      </li> 
 
      <li><a href="#">test</a> 
 
      </li> 
 
      <li><a href="#">test</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>