CSS Making an Active State Nav element - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar Item

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav Bar Item

Description

CSS Making an Active State Nav element

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
div.menu a.current {
   background:Chartreuse;
}

.menu {<!--from   ww  w .  ja v a 2s.co m-->
   width:100%;
   margin:0;
   padding:0;
}

.menu a.menuitem {
   font-size:11px;
   font-weight:bold;
   color:yellow;
   display:block;
   position:relative;
   width:auto;
   border-bottom:2px solid blue;
   margin:0;
   padding:5px 11px 5px 11px;
   text-decoration:none;
}

.menu a.menuitem:visited, .menu .menuitem:active {
   color:pink;
   text-decoration:none;
}

.menu a.menuitem .statusicon {
   position:absolute;
   top:6px;
   right:6px;
   border:none;
}

.menu a.menuitem:hover {
   background:OrangeRed;
   color:grey;
   text-decoration:none;
}

.menu div.submenu {
   width:auto;
   margin:0;
   padding:0;
}

.menu div.submenu ul {
   list-style-type:none;
   font-size:13px;
   margin:0;
   padding:0;
}

.menu div.submenu ul li {
   border-bottom:2px solid BlueViolet;
   line-height:13px;
   margin:0;
   padding:0;
}

.menu div.submenu ul li a {
   display:block;
   font-size:13px;
   color:Chartreuse;
   text-decoration:none;
   margin:0;
   padding:6px 11px 6px 21px;
}

.menu div.submenu ul li a:link {
   color:yellow;
   text-decoration:none;
}

.menu div.submenu ul li a:visited {
   color:blue;
   text-decoration:none;
}

.menu div.submenu ul li a:active {
   background:pink;
   color:OrangeRed;
   text-decoration:none;
}

.menu div.submenu ul li a:hover {
   background:grey;
   color:BlueViolet;
   text-decoration:none;
}
</style> 
 </head> 
 <body> 
  <div class="menu"> 
   <a class="menuitem submenuheader" href="seller-account-store-profile.html">Lorem ipsum dolo</a> 
   <a class="menuitem submenuheader" href="">Lorem ipsum do</a> 
   <a class="menuitem submenuheader current" href="">Lorem ipsum dolo</a> 
   <a class="menuitem submenuheader" href="">Lorem ipsum dolor</a> 
   <a class="menuitem submenuheader" href="">Lorem ipsum d</a> 
   <a class="menuitem submenuheader" href="">Lorem ipsum dol</a> 
  </div>  
 </body>
</html>

Related Tutorials