CloseTag | الشروحات | CSS | شريط التنقل الأفقي في لغة CSS | CSS Horizontal Navigation Bar

<!DOCTYPE html>
<html>
<style>
ul
{
list-style:none;
padding:0;
float:left;
}

ul li
{
float:left;
}
ul a
{
border:solid 1px white;
padding:8px 16px;
display: block;
text-decoration: none;
background:#ecf0f1;
color:black;
}

ul li a:hover
{
background:#ced6e0;
color:black
}
</style>
<body>

<ul>
  <li><a href="#default">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>


</body>
</html>