Creating menu with css

You can create a menu in your website using css. CSS is good for SEO. To create this menu, you can “ul” and “li“ tag. Create the “ul” setting the list-style to none: list-style: none;

Try the following code.

<style type="text/css">
<!--
body,td,th {
 font-family: Tahoma;
 font-size: 12px;
 color: 1B1C1D;
}
#menu {
  width: 160px;
  border-left: 1px solid #2F2C2C;
  border-right: 1px solid #2F2C2C;
  background-color : #CECACA;
}
#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #2F2C2C;
}
#menu li {
  background-color: #FFFFFF;
  border-bottom: 1px solid #2F2C2C;
}
#menu li a {
  display: block;
  padding: 5px 10px 5px 0.5em;
  background-color: #FFFFFF;
  color: #000000;
  text-decoration: none;
}
#menu li a:hover {
  display: block;
  padding: 5px 10px 5px 0.5em;
  background-color: #ff0000;
  color: #FFFFFF;
  text-decoration: none;
}

-->
</style>
<div id="menu">
 <ul>
  <li><a href='' title=''>Home</a></li>
  <li><a href='' title=''>About us</a></li>
  <li><a href='' title=''>Products</a></li>
  <li><a href='' title=''>Contact us</a></li>
 </ul>
</div>

1 comment(s)

Track this comments via RSS 2.0 feed. Feel free to post the comment, or trackback from your web site.

Jul 7, 2009 by rajesskumar
Very useful and thanks
Any feedback from you?

Your name (required)

E-mail address (required) (not published!)

Website

Your comment

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.