Trình đơn định hướng nhiều cấp 

Hiệu ứng này kết hợp cả CSS và JavaScript để tạo một trình đơn định hướng nhiều cấp trên trang web, các trình đơn con sẽ xổ xuống khi người dùng rê con trỏ chuột vào. Bạn có thể dễ dàng thêm nhiều cấp như mong muốn và hiệu ứng này không sử dụng thẻ table để thiết kế trình đơn mà dùng kĩ thuật CSS đang thịnh hành hiện nay.

<style type="text/css">

#dd {

  margin-left: 25%;

  padding: 0 0 20px 0;

}



#dd li {

  margin: 0;

  padding: 0;

  list-style: none;

  float: left;

  font: bold 11px arial;

}



#dd li a.menu {

  display: block;

  text-align: center;

  background: #5970B2;

  padding: 4px 10px;

  margin: 0 1px 0 0;

  color: #FFF;

  width: 60px;

  text-decoration: none;

}



#dd li a.menu:hover {

  background: #49A3FF;

}



.submenu {

  background: #EAEBD8;

  border: 1px solid #5970B2;

  visibility: hidden;

  position: absolute;

  z-index: 3;

}



.submenu a {

  display: block;

  font: 11px arial;

  text-align: left;

  text-decoration: none;

  padding: 5px;

  color: #2875DE;

}



.submenu a:hover {

  background: #49A3FF;

  color: #FFF;

}

</style>





Theo javascriptbank