In this part we will use ul li css code some simple but usefull seo friendly menu.First let’s start with a Horizontal Menu with rollover image . we will use images,but most important is we need make it seo friendly.
ul li css SEO friendly simple horizontal menu
We need prepare 2 images. one for normal menu background while another for hover & current menu background.That’s all , very simple . Let’s look the HTML codes frame:
<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> |
Related css codes:
#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; } |
Click here to see the live demo .
IE6 below Issue
If you have IE6 , You may noticed that this menu rollover image function not work in IE6 and below .
What’s the solution:
We need use Third-party approach : The csshover3.htc . Add it to the same folder of css , then add this line “behavior: url(“csshover3.htc”);” to #navs ul li .So it should like this :
#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; } |
But this cause a inssue : the css can’t pass w3c valid .i tried many ways , but didn’t figure it out. if someone have a more good solution,please let me know. Click here to see the final version .DownLoad HERE .