HTMLリストのオブジェクトスタイリングはブロック全体には適用されません

ナビゲーションバーを作成して、https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_grayをフォローしようとしています。ナビゲーションバーが期待どおりに機能していません。リストオブジェクトの上にマウスを置くと、ブロック全体ではなく、テキストと小さな背景の色しか表示されません。ブロック全体の色をどのように変更するのですか？HTMLリストのオブジェクトスタイリングはブロック全体には適用されません

のindex.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link type="text/css" rel="stylesheet" href="default.css"> 
    <title>My Dashboard</title> 
</head> 
<body> 
    <!--Navigation Bar--> 
    <ul id="navbar"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="weather.html">Weather</a></li> 
     <li><a href="time.html">World Time</a></li> 
     <li><a href="help.html">Help</a></li> 
    </ul> 
    <!--Navigation Bar End--> 
</body> 
</html>

default.css：

/*Importing Fonts*/ 
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900'); 
/*Finish Import*/ 

#navbar{ 
    font-family: "Raleway SemiBold", serif; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 200px; 
    background-color: #13006e; 
    display: block; 
} 

#navbar li { 
    color: white; 
    display: block; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

#navbar li a:hover{ 
    color:white; 
    background-color: #008000; 
}

ありがとう！ Neeron。

出典

2017-12-22 Neeron Bhatta

の例のように – iSZ

タグをnavbar liに追加するだけで済みます。あなたは李A {表示：ブロックを}追加する必要が

/*Importing Fonts*/ 
 
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900'); 
 
/*Finish Import*/ 
 

 
#navbar{ 
 
    font-family: "Raleway SemiBold", serif; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 200px; 
 
    background-color: #13006e; 
 
    display: block; 
 
} 
 

 
#navbar li a{ 
 
    color: white; 
 
    display: block; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 

 
#navbar li a:hover{ 
 
    color:white; 
 
    background-color: #008000; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link type="text/css" rel="stylesheet" href="default.css"> 
 
    <title>My Dashboard</title> 
 
</head> 
 
<body> 
 
    <!--Navigation Bar--> 
 
    <ul id="navbar"> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="weather.html">Weather</a></li> 
 
     <li><a href="time.html">World Time</a></li> 
 
     <li><a href="help.html">Help</a></li> 
 
    </ul> 
 
    <!--Navigation Bar End--> 
 
</body> 
 
</html>

出典

2017-12-22 06:50:18 krezus

おかげで、それが働きました！なぜそうなのか説明できますか？私はそれが "ホバリング"だと信じていますが、 "ホバリング"していないときは宣言しません。私は正しい？ –

HTMLリストのオブジェクトスタイリングはブロック全体には適用されません

答えて

関連する問題