在导航栏中悬停时填充顶部元素

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>