Menu item with border
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style rel="stylesheet" type="text/css"> .menu_block { width: 896px; float: left; margin: 0 0 0 -36px; display: inline } #menu { background-image: url(images/menu_bg.gif); background-position: top left; background-repeat: no-repeat; width: 196px; float: left; } #menu ul { padding: 46px 0 0 47px; float: left; height: 183px; } #menu li { list-style-type: none; padding: 5px 0 4px 0; float: left; display: inline } .dots { background-image: url(images/dots.gif); background-position: bottom left; background-repeat: no-repeat; } #menu img { float: left; } #menu li a { display: block; float: left; background-image: url(images/arrow.gif); background-position: bottom right; background-repeat: no-repeat; padding: 0 7px 0 0 } #menu li a:visited { background-position: bottom right } #menu li a:hover { background-position: top right } #menu #active { background-position: top right } </style> </head> <body> <div class="menu_block"> <div id="menu"> <ul> <li class="dots"><a href="index.html" id="active"><img src="images/but1.gif" alt="" width="124" height="12" /></a></li> <li class="dots"><a href="index2.html"><img src="images/but2.gif" alt="" width="124" height="12" /></a></li> <li class="dots"><a href="index2.html"><img src="images/but3.gif" alt="" width="124" height="12" /></a></li> <li class="dots"><a href="index2.html"><img src="images/but4.gif" alt="" width="124" height="12" /></a></li> <li class="dots"><a href="index2.html"><img src="images/but5.gif" alt="" width="124" height="12" /></a></li> <li class="dots"><a href="index2.html"><img src="images/but6.gif" alt="" width="124" height="12" /></a></li> <li><a href="index2.html"><img src="images/but7.gif" alt="" width="124" height="12" /></a></li> </ul> </div> <div class="float"><img src="images/slogan.jpg" alt="" width="700" height="229" /></div> </div> </body> </html>