html - HTML リンク要素の高さを背景に設定します

Question

リンク要素(HOME,GAMES,ANIMALS,LOGOUT)の高さを設定できなかったので教えていただきたいです。HTML コード:

    echo"<div id=\"navigation_bar\">";
echo"<ul>";
echo" <li id=\"home\"><a href=\"animal_home.php\" >HOME</a></li>";
echo" <li id=\"laro\"><a href=\"animal_laro.php\">GAMES</a></li>";
echo" <li id=\"aralin\"><a href=\"animals.php\">ANIMALS</a></li>";
echo" <li id=\"logout\"><a href=\"animal_logout.php\">LOGOUT</a></li>";
echo"</ul>";
echo"</div>";

これはcssですが：

 #navigation_bar ul {
display:block;
float:left;
width:800px;
height:50px;
background:url(images/animal_home_nav.png) no-repeat center;
list-style:none;
}



#navigation_bar ul li  {
display:block;
float:left;
height:50px;
}

  #home{
width:190px;
}


#aralin {
width:220px;
}


#laro {
width:161px;
}

  #logout{
width:200px;    
}

Answer 1

このcssをcssファイルに追加するだけです

#navigation_bar ul li a{
display:block;
height:100%;
width:100%
}