Biên soạn theo hướng dẫn của CSS Tutorial

Với CSS<.

Đầu tiên, bạn cần soạn thảo một tài liệu HTML với cấu trúc cơ bản (gồm html, head, body). Tiếp theo bạn thực hiện soạn thảo đoạn mã HTML sau vào phần body. Đoạn mã này cho phép bạn tạo ramột vùng DIV (có id là menu) chứacác Danh sách không có thứ tự (Unordered List – UL) lồng nhau.

[sourcecode language=”html”]

<h3>ACCP i10</h3>

<div id="menu">

<ul>

<li><a href="#">Sem 1</a>

<ul>

<li><a href="#">Computing Fundametal</a></li>

<li><a href="#">C Programming</a></li>

<li><a href="#">Building Dynamic Website</a></li>

<li><a href="#">MS Transact-SQL</a></li>

<li><a href="#">Project</a></li>

</ul>

</li>

<li><a href="#">Sem 2 </a>

<ul>

<li><a href="#">Cloud Computing</a></li>

<li><a href="#">APJ – I</a></li>

<li><a href="#">APJ – II</a></li>

<li><a href="#">APJ – III</a></li>

<li><a href="#">eProject</a></li>

</ul>

</li>

<li><a href="#">Sem 3</a></li>

<li><a href="#">Sem 4</a></li>

</ul>

</div>

[/sourcecode]

Sau khi thực hiện xong đoạn code trên, chúng ta có thể thấy kết quả như sau khi chạy trang HTML này trên trình duyệt (chưa có CSS):

Để tránh có sự khác biệt giữa các trình duyệt, bạn bổ sung đoạn mã CSS sau vào cặp thẻ style ở phần head của tài liệu HTML. Các bộ chọn (selector) này sẽ giúp bạn đặt cố định loại font chữ cho tài liệu và đặt các thuộc tính căn lề cho khung và cho nội dung của các danh sách, phần tử trong danh sách (ul, li).

[sourcecode language=”css”]
body{
font-family: Arial;
}
#menu, #menu ul, #menu li{
padding:0;
margin:0;
}
[/sourcecode]

Bạn tiếp tục bổ sung bộ chọn với các thuộc tính sau cho các phần tử trong danh sách (li).

  • list-style:  none; Mô tả này sẽ giúp bạn bỏ đi các ký hiệu đánh dấu đầu mỗi phần tử của
    danh sách (bullet).
  • position: relative; Mô tả này sẽ cho phép các danh sách con được đặt cạnh phần tử chứa nó
    (phần tử của danh sách ngoài)
  • width:100px; và height: 30px; Hai mô tả này sẽ giúp bạn cố định chiều rộng và chiều cao
    của một phần tử trong danh sách.
  • padding:0 20px; Cố định lề trái (left) và phải (right) dành cho các nội dung bên trong phần
    tử danh sách (li) với khung viền của nó.
  • background-color: black;  Đổi màu nền sang mà đen cho tất cả các phần tử trong danh
    sách.
  • line-height: 30px; Cố định chiều cao cho mỗi dòng văn bản trong phần tử của danh sách.
  • cursor:pointer; chuyển biểu tượng của con trỏ màn hình sang hình bàn tay.

[sourcecode language=”css”]
#menu li{
list-style: none;
position: relative;
width:100px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
cursor:pointer;
}
[/sourcecode]

Chạy lại trang HTML bạn sẽ có kết quả sau:

Bạn tiếp tục định nghĩa thêm một bộ chọn mới dành cho các liên kết bên trong các danh sách (thẻ a); bộ chọn này gồm các mô tả sau: text-decoration: none; dùng để bỏ các gạch chân của liên kết và color: white; dùng để đổi màu liên kết sang màu trắng.Xem chi tiết code CSS dưới đây:

[sourcecode language=”css”]
#menu li a{
text-decoration:none;
color: white;
}
[/sourcecode]

Để mỗi khi bạn đưa chuột qua các phần tử của danh sách (giờ là mục chọn trong trình đơn) màu nền của chúng bị thay đổi, bạn cần định nghĩa một bộ chọn như sau:

[sourcecode language=”css”]
#menu li:hover{
background-color:red;
}
[/sourcecode]

Kiểm tra lại trang HTML, bạn sẽ có kết quả sau:

Bộ chọn tiếp theo sẽ dành cho các danh sách con (danh sách bên trong một phần tử của danh sách khác), mô tả position: absolute; cho phép cố định vị trí xuất hiện của các danh sách con, mô tả top: 0; và left: 160px; xác định vị trí góc trên trái của khung chứa danh sách con (so với vị trí của phần tử chứa danh sách này), mô tả visibility: hidden; sẽ ẩn làm các danh sách con.

[sourcecode language=”css”]
#menu ul ul{
position: absolute;
top:0;
left:160px;
visibility:hidden;
}
[/sourcecode]

Cuối cùng, bạn thêm một bộ chọn dành cho các danh sách con khi phần tử của danh sách ngoài bị đưa con trỏ qua. Bộ chọn này sẽ cho phép danh sách con tương ứng của phần tử đó được hiển thị lên.

[sourcecode language=”css”]
#menu ul li:hover ul{
visibility:visible;
}
[/sourcecode]

Kết quả cuối cùng, bạn có một trình đơn buông xuống mỗi khi đưa con trỏ vào một phần tử của danh sách:

Chúc bạn thành công!