Create Nav Bar Links with button effect

Description

Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--  w  ww. j  a  va2 s  . c  om-->
   text-align:center
}

#navbar {
   position:relative;
   top:16px;
   padding:0;
   display:inline-block;
   background-repeat:repeat-x;
   border-radius:16px;
}

#navbar li {
   list-style:none;
   float:left;
   position:relative;
   height:51px;
   line-height:51px;
   background-image:url('http://www.java2s.com/style/demo/Google-Chrome.png');
   background-repeat:no-repeat;
   background-size:100% 100%;
}

#navbar li a {
   display:block;
   padding:4px 31px;
   text-transform:uppercase;
   text-decoration:none;
   color:Chartreuse;
   font-weight:bold;
}

#navbar li a:hover {
   color:yellow;
}

#navbar li ul {
   display:none;
   position:absolute;
   left:0;
   width:100%;
   margin:0;
   padding:0;
   text-align:center;
   margin-left:-100px;
}

#navbar li ul table td {
   background-image:url('http://www.java2s.com/style/demo/Google-Chrome.png');
   background-repeat:no-repeat;
   background-size:100% 100%;
}

#navbar li ul table {
   margin-top:-7px;
   width:351px;
   border-radius:16px;
}

#navbar li ul table tr {
   height:26px;
}

#navbar li:hover ul {
   display:block;
}

#navbar li:hover li {
   float:center;
}

#navbar li:hover li a {
   color:blue;
}

#navbar li li a:hover {
   color:pink;
}

#bottomnav {
   position:fixed;
   z-index:100;
   bottom:16px;
   left:0;
   width:100%;
}
</style> 
 </head> 
 <body> 
  <header> 
   <img src="https://www.java2s.com/style/demo/Safari.png" width="800" height="225" alt="This is our logo."> 
  </header> 
  <ul id="navbar"> 
   <li> <a href="../index.html">Home</a> </li> 
   <li> <a href="../services.html">Services</a> 
    <ul> 
     <table align="center"> 
      <tbody> 
       <tr> 
        <td> <a href="../spraying.html">Spraying</a> </td> 
        <td> <a href="../combine.html">Combining</a> </td> 
       </tr> 
       <tr> 
        <td> <a href="../planting.html">Planting</a> </td> 
        <td> <a href="../drilling.html">Drilling</a> </td> 
       </tr> 
       <tr> 
        <td> <a href="../strip_tillage.html">Strip Tillage</a> </td> 
        <td> <a href="../tillage.html">Tillage</a> </td> 
       </tr> 
      </tbody> 
     </table> 
    </ul> </li> 
   <li> <a href="#">Packages</a> </li> 
   <li> <a href="#">About Us</a> </li> 
   <li> <a href="#">Contact Us</a> </li> 
  </ul> 
  <div id="bottomnav">
    Copyright 2016 Yest &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Site Map 
  </div>  
 </body>
</html>
Create Nav Bar Links with button effect - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
