Menu with highlight

Menu with highlight : Menu : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » Menu »

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>