HTML CSS examples for CSS Widget:Hover Link
Disable CSS hover effects on active link
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> nav {<!-- www. java2 s . c o m--> height:41px; border-bottom:2px solid Chartreuse; font-family:'Open Sans', Helvetica, sans-serif; } .primary_nav li, .user_nav li, .nav-link, .primary_nav .active { display:inline-block; } .primary_nav li { margin-right:16px; } .nav-link, .primary_nav .active { color:yellow; font-size:2em; font-weight:401; text-decoration:none; } .primary_nav .active { border-bottom:4px solid blue; padding-bottom:17px; } .primary_nav li:hover { border-bottom:4px solid pink; padding-bottom:17px; } .primary_nav .active a { color:OrangeRed; } </style> </head> <body> <nav> <ul class="primary_nav"> <li class="active"> <a href="#" class="nav-link">Lorem </a> </li> <li> <a href="#" class="nav-link">Lorem ips</a> </li> <li> <a href="#" class="nav-link">Lorem</a> </li> </ul> </nav> </body> </html>