使CSS漸變展開爲阻止？

Question

我想（在某種程度上）在這一主題的最頂端複製菜單欄的外觀：http://elegantthemes.com/preview/Lucid/

說我有越來越梯度我借採取了掙扎的一部分一個<li>元素佔據的整個「塊」。由於這是一個有點難以概念解釋，這裏是我目前有：http://jsfiddle.net/tCH39/

以供參考，在這裏是HTML的相關作品和CSS：

<div id="top-menu"> 
    <ul> 
     <li><a href="home">Home</a></li> 
     <li><a href="about">About</a></li> 
    </ul> 
    </div> 

CSS：

body { /* CSS Reset - http://meyerweb.com/eric/tools/css/reset/ */ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} 

ol, ul { list-style: none; } 
li { 
    display: inline; 
    padding-left: 30px; 
    padding-right: 30px; 
} 

a { 
    text-decoration: none; 
    color: black; 
} 

#top-menu { 
    position: relative; 
    /*display: block;*/ 
    background-color: #f9f9f9; 
    width: 100%; 
    height: auto; 
    border-bottom: 1px solid #eeeeee; 
    margin-bottom: 60px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 

#top-menu a { 
    text-shadow: 1px 1px 0 #fff; 
    color: #4b4b4b; 
    width: auto; 
    height: 100%; 
    display: inline-block; 
} 

#top-menu > ul > li > a { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } 
#top-menu > ul > li > a:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); } 
#top-menu li.sfHover > a { color: #fff; text-shadow: none; } 

爲什麼漸變僅限於文本，而不是由填充，邊距等組成的整個區域？

在此先感謝。

Answer 1

首先，你有梯度的a

#top-menu > ul > li > a { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } 
#top-menu > ul > li > a:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); } 

這應該是在li。

#top-menu > ul > li { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } 
#top-menu > ul > li:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); } 

然後我增加了li的高度。

李例如：http://jsfiddle.net/tCH39/1/如果你想在風格本身a

。

這樣做：

ol, ul { list-style: none; padding: 0; margin:0; } 


a { 
    text-decoration: none; 
    color: black; 
    padding-top: 30px; 
    padding-bottom: 30px; 
    padding-left: 10px; 
    padding-right: 10px; 
    display: block; 
} 

顯示在a-例如小提琴：http://jsfiddle.net/tCH39/7/

這是在我的書更清潔方法，因爲一個是元素你想要風格，並點擊「遍」。

Answer 2

您只給予li中的a標籤樣式。

試戴

#top-menu > ul > li { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } 
#top-menu > ul > li:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); } 

也許它可以幫助

鏈接：http://jsfiddle.net/tCH39/2/

Answer 3

它在純文本約束的，因爲:hover是<a>鏈接不爲<li>標籤：

#top-menu > ul > li > a:hover { 
color: #fff; 
background-color: #4b4b4b; 
text-shadow: -1px -1px 0 #000; 
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); 
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); 
box-shadow: inset 0 0 10px rgba(0,0,0,0.9); } 

您可以將CSS更改爲：

#top-menu > ul > li:hover { 
color:#fff; 
background-color:#4b4b4b; 
text-shadow:-1px -1px 0 #000; 
-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.9); 
-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.9); 
box-shadow:inset 0 0 10px rgba(0,0,0,0.9); 
} 

Answer 4

我的確在某些變化你的CSS。我想這就是你要找的。

Live Demo

ul, li { 
    margin: 0; 
    padding: 0; 
} 

#top-menu { 
    position: relative; 
    /*display: block;*/ 
    background-color: #f9f9f9; 
    width: 100%; 
    height: auto; 
    border-bottom: 1px solid #eeeeee; 
} 
#top-menu ul{ 
    margin: 0 35px; 
} 
#top-menu ul li{ 
    display:inline-block; 
    margin-left: -4px; 
} 
#top-menu a { 
    text-shadow: 1px 1px 0 #fff; 
    color: #4b4b4b; 
    width: auto; 
    height: 100%; 
    display: inline-block; 
    padding: 25px 30px; 
}