Tạo menu đa cấp CSS

Cascading Style Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. Để tạo ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh phải lặp lại việc định dạng cho các trang web giống nhau.
với Style này bạn có thể áp dụng rất nhanh chóng cho trang web của bạn thêm linh hoạt hơn.

Bai này không do demo. xem thêm các bài viết tạo menu CSS khác tại đây.

Bước 1: Vào Blogger account >> Thiết kế (Design) >> Chỉnh sửa HTML (Edit/Html) >> click vào Mở rộng tiện ích và dán đoạn code sau vào trên thẻ đóng </head>.

<style type="text/css"> .menu {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPCwIEwN_C0qo2mbfuTbb7EAGqcFx97s5jQODD_NvcCYxc8RMfM8V_8fGosDdBcRhqc_tNyQ_YwUiWdg0R_NRKbOWACvWxuLkTXT0FQyWfbv-CX6RPNtgBwag_34U55tRVHdkufvyeyXI/s128/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; } .menu li.top {display:block; float:left; position:relative;} .menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;} .menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;} .menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLqaUVk5yB4HhyU_90Vq_tZiSJ1RN4TAkI60MCuIxNakeuFIvXp69NoM002eC3KMgJOJF4NK7O2S_HovBsgfR6PQcgjuthyeNZSVRhhbp9rDX_vTc0cwU-kuVqJu6iXH1gV36q8m2Puuw/) no-repeat;} .menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLqaUVk5yB4HhyU_90Vq_tZiSJ1RN4TAkI60MCuIxNakeuFIvXp69NoM002eC3KMgJOJF4NK7O2S_HovBsgfR6PQcgjuthyeNZSVRhhbp9rDX_vTc0cwU-kuVqJu6iXH1gV36q8m2Puuw/) no-repeat right top;} .menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLqaUVk5yB4HhyU_90Vq_tZiSJ1RN4TAkI60MCuIxNakeuFIvXp69NoM002eC3KMgJOJF4NK7O2S_HovBsgfR6PQcgjuthyeNZSVRhhbp9rDX_vTc0cwU-kuVqJu6iXH1gV36q8m2Puuw/) no-repeat;} .menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLqaUVk5yB4HhyU_90Vq_tZiSJ1RN4TAkI60MCuIxNakeuFIvXp69NoM002eC3KMgJOJF4NK7O2S_HovBsgfR6PQcgjuthyeNZSVRhhbp9rDX_vTc0cwU-kuVqJu6iXH1gV36q8m2Puuw/) no-repeat right top;} .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} .menu a:hover {visibility:visible;} .menu li:hover {position:relative; z-index:200;} .menu ul, .menu :hover ul ul, .menu :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} .menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;} .menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;} .menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;} .menu :hover ul.sub li a.fly {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUOL0rVVb3dMnHNEGIA6nHjnsvGUg7-AX7fcX0VtBB7kFTA7WtD2W9KZtUE27ybuFSDdUra8y9DYUOhw0trpWyK8P-HCr7S_3VUyZG_f1Vqz6vE4sExgcDdcSQ6p83CWjGGlZnP4zfYU8/) 80px 7px no-repeat;} .menu :hover ul.sub li a:hover {background:#42c555; color:#fff;} .menu :hover ul.sub li a.fly:hover {background:#42c555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7tJ5o3A4ddPVQsrNjs1LCHZ0lpeVAFkugCQJ2hDQGBkPEsXHGo3AwCfBFD58z-Jv5-dJ_YVXSObou0psSW5ZnScNJUm-46wJyzs_1V0XqOsGFAbo1_snN06eRaw8XgXBAqLbbuQjZCWg/) 80px 7px no-repeat; color:#fff;} .menu :hover ul li:hover > a.fly {background:#42c555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7tJ5o3A4ddPVQsrNjs1LCHZ0lpeVAFkugCQJ2hDQGBkPEsXHGo3AwCfBFD58z-Jv5-dJ_YVXSObou0psSW5ZnScNJUm-46wJyzs_1V0XqOsGFAbo1_snN06eRaw8XgXBAqLbbuQjZCWg/) 80px 7px no-repeat; color:#fff;} .menu :hover ul :hover ul, .menu :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul :hover ul {left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;} </style>

Chú ý: Có thể thay các code để tạo một menu theo ý của mình (Chủ yếu là các URL hình ảnh), hay các thông số về độ rộng và chiều cao của menu..

Bước 2: Tạo 1 widget HTML/javascript và dán đoạn code bên dưới vào hoặc dưới thẻ <body>.
<style media='all' type='text/css'>@import "/menu/menu_style.css";</style> <div> <ul class='menu'> <li class='top'><a class='top_link' href='http://www.kynangso.com' target='_blank'><span>Home</span></a> </li> <li class='top'><a class='top_link' href='http://www.kynangso.com/search/label/Phan%20mem' target='_blank'><span>Phan mem</span></a> <ul class='sub'> <li><a href='http://www.kynangso.com/search/label/May%20vi%20tinh' target='_blank'>May vi tinh</a></li> <li><a href='http://www.kynangso.com/search/label/Phan%20mem%20Mobile' target='_blank'>Mobile</a></li> <li><a href='http://www.kynangso.com/search/label/Tao%20va%20su%20ly%20anh' target='_blank'>Tao va su ly anh</a></li> </ul> </li> <li class='top'><a class='top_link' href='http://www.kynangso.com/search/label/Thu%20thuat' target='_blank'><span>Thu thuat</span></a> <ul class='sub'> <li><a href='#' target='_self'>Thu thuat 1</a></li> <li><a href='#' target='_self'>Thu thuat 2</a></li> <li><a href='#' target='_self'>Thu thuat 3</a></li> <li><a href='#' target='_self'>Thu thuat 4</a></li> </ul> </li> <li class='top'><a class='top_link' href='http://www.kynangso.com/search/label/Games' target='_blank'><span>Game</span></a> <ul class='sub'> <li><a href='#' target='_blank'>The loai 1</a></li> <li><a href='#' target='_blank'>The loai 2</a></li> <li><a href='#' target='_blank'>The loai 3</a></li> </ul> </li> <li class='top'><a class='top_link' href='#' target='_blank'><span>Email</span></a> </li> </ul> </div>
Chú ý: Thay URL cho phù họp với Blog.
Chúc thành công.