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&gt;
<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&gt;
</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

Css Menu Bar

Download This File here

For free css menus visit : http://www.styledmenus.com

About these ads

7 Responses to Creating Simple CSS Menu Bar

  1. Blogulate says:

    Simple and useful .thanks

  2. surya says:

    this code is not working.

  3. hi surya,
    what is the problem your facing??

  4. Shadoz CSS says:

    nice tutorial. thanks.

  5. shaun says:

    If you copy and paste into a code editor like dreamweaver, you’ll have to replace the quotes.

  6. Peggy says:

    How can I make sure my menubar is 100% width in any browser with any resolution?

  7. CSS says:

    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%;
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: