CSS：展開懸停

我在我的網站側面有一個菜單欄，我希望懸停在菜單欄的寬度上，目前爲止它只覆蓋文本。CSS：展開懸停

我希望它看起來像這一點，並讓他們全部結束，其中菜單結束

而是它看起來像這樣

HTML：

#menu { 
 
    width: 21.4vw; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-weight: normal; 
 
\t font-size: 1vw; 
 
    text-align: left; 
 
    margin-left: 1vw; 
 
    background-color: #CA2A2A; 
 
     border-radius: 0px; 
 
     max-width: 96vw; 
 
    
 
} 
 
#menu ul { 
 
    height: auto; 
 
    padding: 0.5vw 0vw; 
 
    margin: 0px; 
 
} 
 
#menu li { 
 
    display: block; 
 

 
} 
 
#menu a { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
    padding: 0.5vw 0.8vw 0.5vw 0.8vw; 
 
\t font-size: 3vw; 
 
    
 
} 
 
#menu a:hover { 
 
    color: #000000; 
 
    background-color: #FFFFFF;

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
<div id="menu"> 
 
<ul> 
 
<li><a href="website.html">Home</a> 
 
<li><a href="breakingnews.html">Breaking News</a></li> 
 
<li><a href="Sport.html">Sport</a></li> 
 
<li><a href="Hulltoday.html">Hull Today</a></li> 
 
<li><a href="Property.html">Property</a></li> 
 
<li><a href="Social.html">Social Media</a></li> 
 
<li><a href="Music.html">Music</a></li> 
 
<li><a href="Reviews.html">Reviews</a></li> 
 
<li><a href="Movies.html">Movies</a></li> 
 
<li><a href="Weather.html">Weather</a></li> 
 
</ul> 
 
</div> 
 
    
 
    </body> 
 
    </html>

我是新來的HTML和CSS，所以任何幫助或建議非常大大appriciated :)

來源

2015-12-10 Harry White

添加您的HTML質疑。 – Keammoort

對不起，現在就完成 –

你打破了與變化的圖像鏈接。 – GolezTrol

您需要添加display: block;到#menu a

#menu { 
 
    width: 21.4vw; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-weight: normal; 
 
\t font-size: 1vw; 
 
    text-align: left; 
 
    margin-left: 1vw; 
 
    background-color: #CA2A2A; 
 
     border-radius: 0px; 
 
     max-width: 96vw; 
 
    
 
} 
 
#menu ul { 
 
    height: auto; 
 
    padding: 0.5vw 0vw; 
 
    margin: 0px; 
 
} 
 
#menu li { 
 
    display: block; 
 

 
} 
 
#menu a { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
    padding: 0.5vw 0.8vw 0.5vw 0.8vw; 
 
\t font-size: 3vw; 
 
    display: block; 
 
} 
 
#menu a:hover { 
 
    color: #000000; 
 
    background-color: #FFFFFF;

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
<div id="menu"> 
 
<ul> 
 
<li><a href="website.html">Home</a> 
 
<li><a href="breakingnews.html">Breaking News</a></li> 
 
<li><a href="Sport.html">Sport</a></li> 
 
<li><a href="Hulltoday.html">Hull Today</a></li> 
 
<li><a href="Property.html">Property</a></li> 
 
<li><a href="Social.html">Social Media</a></li> 
 
<li><a href="Music.html">Music</a></li> 
 
<li><a href="Reviews.html">Reviews</a></li> 
 
<li><a href="Movies.html">Movies</a></li> 
 
<li><a href="Weather.html">Weather</a></li> 
 
</ul> 
 
</div> 
 
    
 
    </body> 
 
    </html>

來源

2015-12-10 19:35:02

a元素是內聯元素，與內容相關的一面，這就是爲什麼白色區域只與文本一樣寬。

爲了解決這個問題，顯示的鏈接作爲一個塊：

#menu a { display: block; }

塊元素，默認情況下，被填充到其內部的父母可用寬度。

來源

2015-12-10 19:35:45 GolezTrol

嘗試添加

display: block;

您#menu選擇。如果這不起作用，請提供菜單的HTML。

來源

2015-12-10 19:39:40

您可以將懸停僞類添加到li元素而不是元素。檢查下面的代碼。這樣你突出顯示的背景將對李的大小生效。

#menu { 
 
    width: 21.4vw; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-weight: normal; 
 
\t font-size: 1vw; 
 
    text-align: left; 
 
    margin-left: 1vw; 
 
    background-color: #CA2A2A; 
 
     border-radius: 0px; 
 
     max-width: 96vw; 
 
    
 
} 
 
#menu ul { 
 
    height: auto; 
 
    padding: 0.5vw 0vw; 
 
    margin: 0px; 
 
} 
 
#menu li { 
 
    display: block; 
 

 
} 
 
#menu a { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
    padding: 0.5vw 0.8vw 0.5vw 0.8vw; 
 
\t font-size: 3vw; 
 
    
 
} 
 
#menu li:hover { 
 
    
 
    background-color: #FFFFFF;} 
 

 
#menu li:hover a { 
 
    
 
    color: #000;}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
<div id="menu"> 
 
<ul> 
 
<li><a href="website.html">Home</a> 
 
<li><a href="breakingnews.html">Breaking News</a></li> 
 
<li><a href="Sport.html">Sport</a></li> 
 
<li><a href="Hulltoday.html">Hull Today</a></li> 
 
<li><a href="Property.html">Property</a></li> 
 
<li><a href="Social.html">Social Media</a></li> 
 
<li><a href="Music.html">Music</a></li> 
 
<li><a href="Reviews.html">Reviews</a></li> 
 
<li><a href="Movies.html">Movies</a></li> 
 
<li><a href="Weather.html">Weather</a></li> 
 
</ul> 
 
</div> 
 
    
 
    </body> 
 
    </html>

來源

2015-12-10 19:47:37

CSS：展開懸停

回答

相關問題