Creating Simple CSS Menu Bar
Easy Way To Create A Simple And Easy Css Menubar
Easy Step 1:open note pad or dream weaver or any editorial you have
if you are using editorials then copy and past this code in to ur header part if not just open note pad and place this code
______________________________________________________________
Code For Note Pad
______________________________________________________________
< html>
<title>
Creating Simple And Easy Css Menu Bar
</title>
<head>
</head>
<body>
</body >
</html>
______________________________________________________________
END OF THE CODE
______________________________________________________________
Below Code Should Be Placed In Between Head Tags
—————————————————————————————–
Code Begins Place This Code In Head Part
—————————————————————————————–
<style type=”text/css”>
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #e1e1e1; /* You Can Change this color */
border: 2px solid #e1e1e1; /*You can change this color*/
}
.hovermenu ul li a:hover{
background-color: #e5e5e5; /*You Can Change This Color*/
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
—————————————————————————————–
END OF THE CODE
—————————————————————————————–
Easy Step 2: Copy And Paste This Code In Your Body Tag
______________________________________________________________
Code Begins
______________________________________________________________
<div class=”hovermenu”>
<ul>
<li><a href=”http://webdesigninfo.wordpress.com”>Home</a></li>
<li><a href=”http://webdesigninfo.wordpress.com/about/”>About Me</a></li>
<li><a href=”http://webdesigninfo.wordpress.com/web-templates/”>Web Templates</a></li>
<li><a href=”http://webdesigninfo.wordpress.com/contact-me/”>Contact Us</a></li>
<li><a href=”http://webdesigninfo.wordpress.com”>Downloads</a></li>
</ul>
</div>
______________________________________________________________
END OF THE CODE
______________________________________________________________
Easy Step 3: Now Save Your Files As Menu.html Or Any Other Name u Like But It Should Be .html Extenstion
Now U Can See Ur Menu Bar In Any Browser
It Should Look Like This
Download This File here
Sponsored Links
November 16, 2007 at 10:49 am
Simple and useful .thanks
November 25, 2007 at 3:02 pm
this code is not working.
November 25, 2007 at 3:54 pm
hi surya,
what is the problem your facing??
February 27, 2008 at 12:16 pm
nice tutorial. thanks.
February 28, 2008 at 7:07 am
If you copy and paste into a code editor like dreamweaver, you’ll have to replace the quotes.
March 22, 2008 at 2:38 pm
How can I make sure my menubar is 100% width in any browser with any resolution?
June 26, 2008 at 1:21 pm
To make menu bar 100% width in all resolution you should add width attribute to UL to following part of CSS
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
width:100%;
}