Thứ Bảy, 14 tháng 4, 2012

CSS tạo dropdown menu

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.