導航欄 - 讓過渡蓋全高

Question

因此，基本上，我需要這個過渡到覆蓋導航欄的整個高度，寬度更小，更包含的，這裏是我的CSS：

ul { 
    background-color: #282828; 
    border-bottom: 7px #276095 solid; 
    padding-top: 15px; 
    width:100%; 
height:50px; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
position:fixed; 
z-index:10; 
    margin-top: 0px; 

} 
li { 
    display:inline; 
padding-right: 50px; 
padding-left: 30px; 
font-size: 24px; 
padding-top:0px; 
    margin-top:0px; 
    font-family: 'Open Sans', sans-serif; 
    text-transform:uppercase; 
     width: 100px; height: 100px; 
    background-size: 100% 200%; 
    background-image: linear-gradient(to bottom, #282828 50%, #276095 50%); 
    -webkit-transition: background-position 1s; 
    -moz-transition: background-position 1s; 
    transition: background-position 1s; 
} 
li:hover { 
     background-position: 0 -100%; 
} 
a { 
    text-decoration:none; 
    color:#ffffff; 

而這裏的我的html：

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<ul> 
    <li><a href="home">Home</a></li> 
    <li><a href="forum">Forums</a></li> 
    <li><a href="shop">Shop</a></li> 
    <li><a href="members">Members</a></li> 
</ul> 

如果你看到這樣的代碼，你會發現，當你將鼠標懸停在一個菜單項，它具有了slideDown過渡，但我似乎無法弄清楚如何把它從滑從上到下。你也會注意到，寬度有點奇怪，我希望它更小，甚至更小。

Answer 1

將padding-top: 15px和padding-bottom: 17px添加到li將使動畫跨越整個高度。

padding-left和padding-right控制寬度。你有一個30像素，另一個像50像素，這就是它不平衡的原因。如果您想將li分開更多空間，但藍色動畫部分仍然較薄，則可以添加margin-left或margin-right以增加間距。