Tạo Menu đơn giản bằng CSS.

Chúng ta đơn giản chỉ cần định nghĩa cho đối tượng ul{} luôn ẩn và thuộc tính li:hover ul{} cho ul hiện lên mỗi khi di chuột tới.
<!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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>MENU POPUP</title> <style> #popMenu {font-family:Times New Roman; font-size:16px;} #popMenu li {float:left; list-style:none; position:relative; background:#f0f0f0; cursor:pointer;} #popMenu ul { position:absolute; margin:0px; padding:0px; z-index:9999; visibility:hidden; width:155px; left:0px; top:22px; box-shadow:0px 0px 5px #000; } #popMenu ul li {float:none; width:100%; border-bottom:1px dotted #ccc;} #popMenu ul ul {left: 152px; top:-3px;} #popMenu a {color:#000; text-decoration:none; display:block; padding:5px 12px 5px 12px;} #popMenu li:hover, #popMenu a:hover {background:#7979ff; color:#fff;} #popMenu li:hover .cap2, #popMenu .cap2 li:hover .cap3, #popMenu .cap3 li:hover .cap4, #popMenu .cap4 li:hover .cap5 {visibility:visible;} </style> </head> <BODY bgcolor="#00CC99"> <div id="popMenu"> <li><a href="#">MENU</a><ul class="cap2"> <li><a href="#">cap2</a><ul class="cap3"> <li><a href="#">cap3cap3 cap3cap3</a></li> <li><a href="#">cap3</a><ul class="cap4"> <li><a href="#">cap4</a></li> <li><a href="#">cap4</a><ul class="cap5"> <li><a href="#">cap5cap5 cap5 cap5 cap5 cap5</a></li> <li><a href="#">cap5 cap5 cap5 cap5 cap5</a></li> <li><a href="#">cap5 cap5 cap5 cap5</a></li> <li><a href="#">cap5 cap5 cap5 cap5 cap5</a></li> <li><a href="#">cap5 cap5 cap5 </a></li> <li><a href="#">cap5cap5ca p5cap5cap5</a></li> </ul></li> <li><a href="#">cap4 cap4 cap4 cap4</a></li> <li><a href="#">cap4cap4 cap4 cap4 cap4 </a></li> <li><a href="#">cap4cap4 cap4 </a></li> </ul></li> <li><a href="#">cap3</a></li> </ul></li> <li><a href="#">cap2cap2cap2</a></li> <li><a href="#">cap2cap2</a></li> </ul> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </div> </BODY> </HTML>

datnuoctoi.com

Quê Hương Việt Nam.

Tạo Menu đơn giản bằng CSS.

Gửi bài viết tới Facebook

Gửi hình ảnh

Popular Posts

Học tập theo đức tính của Bác

Biểu thức chính quy RegExp.

Đột phá: Các nhà khoa học Israel vừa tạo ra quả tim in 3D đầu tiên từ tế bào người

200 Tính từ thông dụng

Lời Của Gió - CS Anh Thơ mp3

Labels

Theme 2018: Quê Hương Việt Nam.

datnuoctoi.com

Quê Hương Việt Nam.

Tạo Menu đơn giản bằng CSS.

Bài Viết Liên Quan:

Gửi bài viết tới Facebook

Gửi hình ảnh

Popular Posts

Học tập theo đức tính của Bác

Biểu thức chính quy RegExp.

Đột phá: Các nhà khoa học Israel vừa tạo ra quả tim in 3D đầu tiên từ tế bào người

200 Tính từ thông dụng

Lời Của Gió - CS Anh Thơ mp3

Labels

Theme 2018: Quê Hương Việt Nam.