Tuesday 2 April 2013

Menu bar with HTML and CSS code


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSSnewbie Example: CSS-Only Dropdown Menu</title>
<style>
/* These styles just pretty up the page a bit. */
body {
   font: 62.5%/1.2 Arial, Helvetica, sans-serif;
   background-color: #eee; }
#wrap {
   font-size: 1.3em;
   width: 500px;
   padding: 20px;
   margin: 0 auto; 
   background-color: #;
   position: relative; }

/* These styles create the dropdown menus. */
#navbar {
   margin: 0;
   padding: 0;
   height: 1em; }
#navbar li {
   list-style: none;
   float: left; }
#navbar li a {
   display: block;
   padding: 3px 8px;
   background-color: #5e8ce9;
   color: #fff;
   text-decoration: none; }
#navbar li ul {
   display: none; 
   width: 10em; /* Width to help Opera out */
   background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0; }
#navbar li:hover li, #navbar li.hover li {
   float: none; }
#navbar li:hover li a, #navbar li.hover li a {
   background-color: #69f;
   border-bottom: 1px solid #fff;
   color: #000; }
#navbar li li a:hover {
   background-color: #8db3ff; }
</style>

<script>

<!-- http://ramsis-code.blogspot.in/  -->
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

</head>
<body>
   <div id="wrap">
  
      <ul id="navbar">
      <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
         <li><a href="#">Item One</a><ul>
            <li><a href="#">Subitem One</a></li><li>
            <a href="#">Second Subitem</a></li><li>
            <a href="#">Numero Tres</a></li></ul>
         </li>
         <li><a href="#">Second Item</a>
            <ul>
               <li><a href="#">Just one subitem</a></li></ul>
         </li>
         <li><a href="#">No Subitem</a></li>
         <li><a href="#">Number Four</a>
            <ul>
               <li><a href="#">Subitem One</a></li><li>
               <a href="#">Second Subitem</a></li><li>
               <a href="#">Numero Tres</a></li><li>
               <a href="#">Fourth Thinger</a></li></ul>         
         </li>
      </ul>
      
   </div>

</body>
</html>

No comments:

Post a Comment