Show border triangle in navbar as indicator for current menu item - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Bar

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

Description

Show border triangle in navbar as indicator for current menu item

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

body {<!--from   w w  w .j av a  2 s .  com-->
   background: #FFFFFF;
   color: #FFFFFF;
   margin: 0px;
   padding: 0px;
   height: 100%;
}
.clear {
   clear: both;
}
.page-wrap {
   width: 980px;
   margin: 0px auto;
   height: 100%;
}
#main-menu {
   background: white;
   height: 55px;
   width: 100%;
   padding: 0px;
   margin: 0px;
   border-bottom: 1px solid black;
}
ul {
   font-size: 18px;
   margin: 0;
   padding: 0;
   list-style: none;
}
ul li {
   display: block;
   position: relative;
   float: left;
}
li ul {
   display: none;
}
ul li a {
   display: block;
   text-decoration: none;
   color: black;
   padding: 0 9px 0 9px;
   background: white;
   margin-left: 1px;
   white-space: nowrap;
   line-height: 55px;
   font: 18px;
   outline: none;
}
ul li a:hover {
   color: black;
}
#menu a:hover:after {
   content: "";
   position: absolute;
   top: 41px;
   left: 50%;
   margin-left: -15px;
   width: 0px;
   height 0px;
   xxmargin: 0px auto;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-bottom: 15px solid white;
}
#menu a:hover:before {
   content: "";
   position: absolute;
   top: 40px;
   left: 50%;
   margin-left: -15px;
   width: 0px;
   height 0px;
   xxmargin: 0px auto;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-bottom: 15px solid black;
}


      </style> 
 </head> 
 <body translate="no"> 
  <header id="main-menu"> 
   <div class="page-wrap"> 
    <ul id="menu"> 
     <li> <a href="#">Recommended</a> </li> 
     <li> <a href="#">Recent</a> </li> 
    </ul> 
   </div> 
  </header>  
 </body>
</html>

Related Tutorials