The simple ul li css SEO friendly horizontal menu

<div id="navs">
<ul>
<li><img alt='Home' src='images/normalbg.jpg' /><a href=''>Home</a></li>
<li><img alt='Portfolio' src='images/normalbg.jpg' /><a href=''>Portfolio</a></li>
<li><img alt='Services' src='images/normalbg.jpg' /><a href=''>Services</a></li>
<li><img alt='Projects' src='images/normalbg.jpg' /><a href=''>Projects</a></li>
<li><img alt='Articles' src='images/normalbg.jpg' /><a href=''>Articles</a></li>
<li><img alt='Contact' src='images/normalbg.jpg' /><a href=''>Contact</a></li>
</ul>
</div>

 #navs ul
 {
	 margin:0px;
	 padding:0px;
 }
 #navs ul li
 {
	float:left;
	display:inline-block;
	list-style:none;
	height:46px;
	position:relative;
	background:url(images/menuover.jpg) repeat-x left top;
 }
 #navs ul li a
  {
	 position:absolute;
	 display:block;
	 line-height:46px;
	 height:46px;
	 width:131px;
	 text-align:center;
	 left:0px;
	 top:0px;
	 text-decoration:none;
	 color:#1F1E1E;
  }
 #navs ul li:hover img
  {
	visibility:hidden;
  }

 #navs ul li
 {
	float:left;
	display:inline-block;
	list-style:none;
	height:46px;
	position:relative;
	behavior: url("csshover3.htc");
	background:url(images/menuover.jpg) repeat-x left top;
 }

7 Responses to “The simple ul li css SEO friendly horizontal menu”

1. How to code a w3c valid 2 columns xhtml layout–step 2 « birghtyoursite says:

   January 10, 2010 at 7:23 pm

   [...] . So next lession we will introduce the ul li css seo fridenly menu . Click here to go directly: The simple ul li css SEO friendly horizontal menu And ul li css none-js SEO friendly [...]
2. jediguy says:

   March 10, 2010 at 5:13 pm

   You have tested it and writing form your personal experience or you find some information online?
3. admin says:

   March 10, 2010 at 5:38 pm

   of course for personal experience . i rip it from one of my projects . In fact , thats the client idea , He is very good at SEO and make you top one in google .
4. electro says:

   March 13, 2010 at 12:16 pm

   Not bad article, but I really miss that you didn’t express your opinion, but ok you just have different approach
5. fassetriall says:

   April 9, 2010 at 6:13 pm

   i came across, cute website
6. Aysseline says:

   June 6, 2010 at 6:17 pm

   You make this to complicated! I don’t know if I can post code in your comment box, so here all files with a working version to all browsers: http://rapidshare.com/files/396103288/simplemenu.rar.html

   You don’t need to put all extra code image in your “li”, just one image in css make the rollover, and no “absolute position”. I just forget to put “title” attribute for the href in my example (SEO )

   Another note for css: when you get “0″ it’s “0″ no need to put “px”.

   And final: just find your site with a link on another site for jQuery and I think to use your nice jquery content slider. Great plugin, thanks. And I hope you update your ajax form!
7. admin says:

   June 6, 2010 at 9:21 pm

   thanks for you advise, i know the tips but for my bad photoshop skill i only can cut to 2 images from the psd. thanks for this notes too when you get “0″ it’s “0″ no need to put “px”. just a little busy those days i will update and upload new jquery plugins ,thanks again

• Search for:

  Enter your search terms

  Web bright your site Submit search form

• Sponsor

• Categories

  • apache (2)
  • css xhtml (10)
  • html5 (1)
  • javascript (3)
  • jquery (5)
  • magento (3)
  • mysql (1)
  • php (1)
  • SEO Friendly (6)
  • Tools (3)
  • w3c validation (4)
  • Wordpress (4)