việc tạo menu đa cấp không có gì là khó, để ý một tý là có thể làm được
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title>Tạo menu bằng html và css</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="wrapper">
<div class="main_menu">
<ul>
<li><a href="">Trang chủ</a></li>
<li><a href="">Giới thiệu</a></li>
<li><a href="">Sản phẩm</a>
<ul>
<li><a href="">Menu con 1</a></li>
<li><a href="">Menu con 2</a></li>
<li><a href="">Menu con 3</a></li>
<li><a href="">Menu con 4</a></li>
<li><a href="">Menu con 5</a></li>
</ul>
</li>
<li><a href="">Tin tức</a></li>
<li><a href="">Giỏ hàng</a></li>
<li><a href="">Liên hệ</a></li>
<li><a href="">Tin tức</a></li>
<li><a href="">Giỏ hàng</a></li>
<li><a href="">Liên hệ</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
và định dạng css như sau:
/*
Document : style
Created on : Mar 30, 2014, 8:21:25 PM
Author : Phan Văn Cương
Website : http://web360plus.com
Trang chia sẻ và đào tạo lập trình thiết kế website
*/
*{ margin: 0px; padding: 0px;}
li{ list-style: none;}
a{text-decoration: none;color: #FFF;font-size: 16px;}
.clear{ clear: both;}
.wrapper{ width: 960px; height: 500px; background: #F8F8F8; margin: 0px auto; }
.main_menu{ background: #00A69B; margin-top: 30px;}
.main_menu>ul>li{ float: left;padding: 11px 27px; position: relative; border-right: 1px dotted #ACACAC;}
.main_menu>ul>li:last-child{ border-right: none;}
.main_menu>ul>li>ul{ display: none; position: absolute; background: #00A69B;top: 41px;width: 198px; left: 0px;}
.main_menu>ul>li:hover ul{ display: block;}
.main_menu ul li:hover{ background: #5F5C5C; transition: all 0.25s;}
.main_menu>ul>li>ul>li{ padding: 5px 10px;}
.main_menu>ul>li>ul>li{ border-bottom: 1px dotted #ACACAC;}
Cập nhật: 17:34 PM - 10/02/2016
Các bản tin khác:
» Hướng dẫn update bios cho mainboard gigabyte H61 trong windown
» Hướng dẫn tăng dung lượng bộ nhớ trong điện thoại di động oppo joy3
» bàn phím, chuột không nhận khi Boot USB cài Win
» Hướng dẫn tạo usb hdd boot đa năng nhất
» Hướng dẫn tạo bản ghost đa cấu hình với EasySysprep đã Việt hoá
» Hướng dẫn tạo usb boot win 8 PE
» hướng dẫn tạo usb boot Win 10 PE dùng được chuẩn UEFI và lagacy
» Tạo usb boot theo chuẩn UEFI – GPT chứa bộ cài Win 7/8/10
» Hướng dẫn tạo USB BOOT đa năng UEFI – LEGACY chứa nhiều hệ điều hành để cứu hộ và cài win
» Xây dựng bộ máy tính chơi game rẻ nhất hiện nay
» Hướng dẫn tạo usb ghost, cài win, hirent boot
» nâng cấp ram laptop
» sửa chữa và bán mainboard pc giá rẻ
» Tắt chức năng tự động cài đặt diver đối với win 7
» sửa lỗi không tìm thấy ổ CứNG LAPTOP, ổ cứng máy tính
» Những chi tiết cần chú ý khi quyết định tự dựng một dàn máy tính chơi game
» Các chuẩn kết nối ổ cứng
» Mainboard GIGABYTE series 8
» Sửa chữa các hư hỏng của máy tính
» Mainboard: Không nhận keyboard và mouse