Create menu header with etched border - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

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

Description

Create menu header with etched border

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">

* {<!-- w  w w  . j  a  v  a2  s  .  co m-->
   margin:0 ;
   padding:0 ;
}
body {
   background:#ffffff ;
   padding:40px 0 ;
   color:#131313 ;
}
#topnav {
   width:100% ;
   height:36px ;
   -webkit-border-radius:8px 8px 0 0 ;
   -moz-border-radius:8px 8px 0 0 ;
   border-radius:8px 8px 0 0 ;
   background: pink;
   background: -webkit-gradient(linear, 0 0, 0 bottom, from(pink), to(yellow));
   background: -webkit-linear-gradient(pink, yellow);
   background: -moz-linear-gradient(pink, yellow);
   background: -ms-linear-gradient(pink, yellow);
   background: -o-linear-gradient(pink, yellow);
   background: linear-gradient(pink, yellow);
   -pie-background: linear-gradient(pink, yellow);
   behavior: url(/pie/PIE.htc);
   position:relative ;
   top:87px ;
   z-index:50 ;
}
ul.menu {
   margin-left:0 ;
   padding-left:0 ;
   list-style-type:none ;
}
.menu li {
   display: block;
   float: left;
   color:#ffffff ;
   border-left:1px solid #5d0000 ;
   border-right: 1px solid #d31a1a ;
   padding:0 16px ;
   margin:0 !important ;
}
.menu li a {
   font-size:16px ;
   color:#ffffff ;
   text-decoration:none ;
   line-height:36px ;
}
.menu li:first-child {
   border-left:0px !important ;
}
.menu li:last-child {
   border-right:0px !important ;
}


      </style> 
 </head> 
 <body> 
  <div id="topnav"> 
   <ul class="menu"> 
    <li> <a href="#">Home</a> </li> 
    <li> <a href="#">Events</a> </li> 
    <li> <a href="#">News</a> </li> 
    <li> <a href="#">Photo</a> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials