Active/current tabbed menu item highlighted - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Item

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Item

Description

Active/current tabbed menu item highlighted

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum do</title> 
  <style>
.service .nav-tabs>li>a {
   text-align:center;
   color:Chartreuse;
   width:151px;
   height:81px;
   margin-left:11px;
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat top center;
   border:0px;
   transition:all 0.7s;
}

.service_tabe_menu.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus {
   background:cyan;
   width:151px;
   height:81px;
   color:yellow;
}

.service_tabe_menu li a:hover {
   background:red;
   color:blue;
}

ul.service_tabe_menu li.current a:active {
   background:green;
   color:pink;
}

.service_tabe_menu li a i {
   font-size:3rem;
   margin-top:41px;
   margin-bottom:26px;
}

.service .tab-content {<!--from w  w w  .j a v  a  2s .  co m-->
   margin-top:100px;
}
</style> 
 </head> 
 <body translate="no"> 
  <ul class="service_tabe_menu nav nav-tabs" role="tablist"> 
   <li role="presentation" class="current active"> <a href="#first" aria-controls="first" role="tab" data-toggle="tab">Lorem</a> </li> 
   <li role="presentation"> <a href="#second" aria-controls="second" role="tab" data-toggle="tab">Lorem </a> </li> 
   <li role="presentation"> <a href="#third" aria-controls="third" role="tab" data-toggle="tab">Lorem</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials