<ul class="horizontal"> <li><a class="active" href="javascript:void(0)">Home</a></li> <li><a href="javascript:void(0)">pages</a></li> <li><a href="javascript:void(0)">Contact</a></li> <li><a href="javascript:void(0)">About</a></li> </ul> <br> <ul class="horizontal lights"> <li><a class="active" href="javascript:void(0)">Home</a></li> <li><a href="javascript:void(0)">pages</a></li> <li><a href="javascript:void(0)">Contact</a></li> <li><a href="javascript:void(0)">About</a></li> </ul> <ul class="vertical"> <li><a class="active" href="javascript:void(0)">Home</a></li> <li><a href="javascript:void(0)">pages</a></li> <li><a href="javascript:void(0)">Contact</a></li> <li><a href="javascript:void(0)">About</a></li> </ul>
/* Copyright (c) 2023 * * Developed by:netbax data */ /* https://www.codebax.com */ ul.horizontal { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #252321; } ul.horizontal li { float: left; } ul.horizontal li a { display: inline-block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; } ul.horizontal li a:hover:not(.active) { background-color: #000; } ul.horizontal li a.active { background-color:red; } ul.lights { border: 1px solid #e7e7e7; background-color: #f3f3f3; } ul.lights li a { display: block; color: #666; text-align: center; padding: 14px 16px; text-decoration: none; } ul.lights li a:hover:not(.active) { background-color: #ddd; } ul.lights li a.active { color: white; background-color: #008CBA; } ul.vertical { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #252321; border: 1px solid #fff; } ul.vertical li a { display: block; color: #fff; padding: 8px 0 8px 16px; text-decoration: none; border: 1px solid #fff; } ul.vertical li a:hover:not(.active) { background-color: #87CEEB; color:#000; } ul.vertical a.active { background-color: #007FFF; color:white; }