CloseTag | الشروحات | CSS | شريط التنقل العمودي في لغة CSS | CSS Vertical Navigation Bar

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

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

ul li a:hover
{
background:#ced6e0;
color:black
}

.active
{
background:#007bff;
color:white;
}

</style>
<body>

<ul>
  <li><a class="active" 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>