Menu with highlight
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <style type='text/css'> ul { width: 100px; list-style: none; position: relative; } li { padding-right: 5px } ul li a { display: block; background-color: #eee; text-indent: 5px; height: 20px; line-height: 20px; color: #000; text-decoration: none; } ul li a:hover { background-color: #ccc; } span { visibility: hidden; position: absolute; width: 5px; height: 20px; right: 0; } span.a { background: red; top: 0 } span.b { background: green; top: 20px } span.c { background: blue; top: 40px } span.d { background: yellow; top: 60px } span.e { background: pink; top: 80px } span.f { background: orange; top: 100px } ul li a:hover span { visibility: visible } </style> </head> <body> <ul> <li><a href=''>A<span class="f"></span></a></li> <li><a href=''>B</span><span class="e"></span></a></li> <li><a href=''>C<span class="d"></span></a></li> <li><a href=''>D<span class="c"></span></a></li> <li><a href=''>E<span class="b"></span></a></li> <li><a href=''>F<span class="a"></span></a></li> </ul> </body> </html>