CSS tạo dropdown menu

Thienthan · #1 (**permalink**) 02-24-2010, 10:53 PM

1. Bạn tạo một trang HTML như sau:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IT</title>

</head>

<body>
<div id="id_div1">
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Thông tin công nghệ</a>
<ul class="a1">
<li><a href="#"> Tin trong nước</a></li>
<li><a href="#"> Tin quốc tế</a></li>

</ul>
</li>
<li><a href="#">Ngôn ngữ lập trình web</a>
<ul class="a1">
<li><a href="#"> HTML basic</a></li>
<li><a href="#"> Javascript CSS</a></li>
<li><a href="#"> ASP language</a></li>
<li><a href="#"> PHP language</a></li>
</ul>
</li>

</ul>
</div>
</body>
</html>
2. Sử dụng CSS để căn chỉnh lại và tạo Dropdown Menu:
bạn có thể tạo ra file css riêng hoặc để trong <style>..nội dung..</style>
* {
margin:0px;
padding:0px;}
#id_div1{
border:1px;
background-color:#FFCC00;
height:50px;
}
#id_div1 ul{
list-style:none;
}
#id_div1 ul li{
position:relative;
float:left;
}
#id_div1 li a{
text-decoration:none;
color:#666666;
padding: .3cm 6px;
font-size:25px;
display:block;
}
#id_div1 li ul{
position:absolute;
display:none;
}
#id_div1 li:hover ul{
display:block;
}

#id_div1 ul li a:hover{
color:#000000;
}
#id_div1 ul li a:active{
font-weight:bold;
}
.a1 a:link{
color:solid;
border-style:inherit;
border:1px solid;
width:6cm;
}
.a1 a:hover{
color:black;
background-color:#FFFF66;
border-style:double;
}
.a1 li{
font-family:Georgia, "Times New Roman", Times, serif;
height:40px;
}
--> các bạn nên tạo ra trang HTML như vậy trước rồi sau đó code đoạn css đó các bạn sẽ hiểu được chức năng của từng dòng lệnh một cách đơn giản.
Theo dohoavn

Chủ đề tương tự
Chủ đề	Người mở Chủ đề	Diễn đàn	Trả lời	Bài mới gửi
Biểu tượng Những thiết kế lạ và đẹp cho thanh menu trên website	Thienthan	Sưu tầm Icon, Logo, Gif, Avatar	0	11-26-2009 08:53 PM
PhotoShop - Tạo tiêu đề cho menu	buonngu	Photoshop	0	07-21-2009 07:32 PM
Macromedia Flash - Tạo menu flash kèm âm thanh	buonngu	Flash	0	07-20-2009 11:13 PM
Làm menu cho web	ziulong	Thiết kế Web HTML/JavaScript / CSS	0	10-26-2008 01:25 PM
CSS Menu	ketnoisunghiep	Thiết kế Web HTML/JavaScript / CSS	0	10-21-2008 09:34 AM

10 Chủ đề mới nhất của Thienthan
Chủ đề	Chuyên mục	Người gởi sau cùng	Trả lời	Lần đọc	Bài mới gửi
Chọn từ khóa nào để đứng đầu các kết quả tìm kiếm?	Kinh doanh, quảng bá trực tuyến	Thienthan	0	83	04-07-2010 05:49 PM
Flash CS4 bài 16: Áp dụng color effect để tạo...	Flash	Thienthan	0	110	04-07-2010 05:45 PM
Truy cập Internet với phí siêu rẻ	Các vấn đề khác liên quan đến Mạng	Thienthan	0	115	04-07-2010 05:39 PM
Các bài hướng dẫn cơ bản về Flash P5	Flash	Thienthan	0	79	04-07-2010 05:38 PM
Các bài hướng dẫn cơ bản về Flash P4	Flash	namseo53	1	447	04-07-2010 05:37 PM
Các bài hướng dẫn cơ bản về Flash P3	Flash	Thienthan	0	80	04-07-2010 05:36 PM
Các bài hướng dẫn cơ bản về Flash P2	Flash	Thienthan	0	94	04-07-2010 05:35 PM
Các bài hướng dẫn cơ bản về Flash P1	Flash	Thienthan	0	107	04-07-2010 05:34 PM
Phòng chống virus lây qua USB	Anti virus - Spyware - Hacking	Thienthan	0	506	04-07-2010 05:32 PM
How to Do Everything with Photoshop 7	E-Book	Thienthan	0	131	03-11-2010 04:35 PM

Công Cụ
Tạo trang in Gửi Email Trang Này
Dạng sắp xếp bài
Chế độ bình thường Chuyển sang chế độ pha trộn Chuyển sang chế độ dạng cây