1. Css List Menu with images

Beautiful Css menu, easy to edit and navigate

Images with different color:

<!-- You must build this code into - head -->
<style type="text/css">
ul
{
list-style-type: none;
}
 a:link {color: #FFFFFF; background-image: url(w8.gif); text-decoration: None} 
 a:visited {color: #FFFFFF; background-image: url(w8.gif); text-decoration: None} 
 a:hover {color: #0000FF; background-image: url(w6.gif); text-decoration: None}
</style>
<!-- You must build this code into - body -->
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Example</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
</ul>
</div>

2. Css List Menu with image

Beautiful Css menu, easy to edit and navigate

Needed image:
menu image
 <style type="text/css"> .outer{ margin:0px; padding:0px; } #m { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; padding:0px; } #m ul{ margin:0px; padding:0px; list-style:none; } #m li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; font-weight:normal; } #m li a:link, #m li a:visited { color: #9E3C02; display: block; background: url(m.gif); padding: 8px 0 0 30px; } #m li a:hover { color: #fff; background: url(m.gif) 0 -32px; padding: 8px 0 0 30px; } #m li a:active { color: #fff; background: url(m.gif) 0 -64px; padding: 8px 0 0 30px; } </style>  <div class="outer"> <div id="m"> <ul> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> <li><a href="#">Example</a></li> </ul> </div> </div>

Powered by Webmaster - artme All rights reserved. Copyright © 2006 Last updated: 2008 December 27 14:49:15