menu1.html
Html 2017
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> #menu {} #menu ul { margin: 0px; padding: 0px; list-style-type: none; } #menu>ul>li { float:left; } #menu>ul>li>a { display:block; width:120px; border-left:1px solid #063; line-height:40px; text-decoration:none; background-color:#09C; font-family:Tahoma, Geneva, sans-serif; color:#FF0; text-align:center; } #menu ul li>ul{ display:none; position:absolute; } #menu ul li>ul a{ display:block; width:200px; border-bottom:1px dotted #063; line-height:40px; text-decoration:none; background-color:#9F9; font-family:Tahoma, Geneva, sans-serif; color:#FF0; } #menu ul li>ul a:hover{ background-color:#FF6; color:#063; } #menu ul li:hover ul{ display:block; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">Tin thế giới</a> </li> <li><a href="#">Tin trong nước</a> <ul> <li><a href="#">Chính trị xã hội</a></li> <li><a href="#">An ninh pháp luật</a></li> <li><a href="#">Phóng sự - Ký sự</a></li> <li><a href="#">Kinh tế xã hội </a></li> </ul> </li> <li><a href="#">Tin nóng</a> <ul> <li><a href="#">Tình hình sự kiện</a></li> <li><a href="#">Trang bị quân đội</a></li> <li><a href="#">Điểm nóng chiến sự</a></li> <li><a href="#">Buôn bán vũ khí </a></li> </ul> </li> <li><a href="#">Kinh tế</a> <ul> <li><a href="#">Chính sách</a></li> <li><a href="#">Tài chính - Ngân hàng</a></li> <li><a href="#">Bất động sản</a></li> <li><a href="#">Chứng khoán</a></li> <li><a href="#">Doanh nghiệp</a></li> <li><a href="#">Hàng hóa</a></li> <li><a href="#">Năng lượng</a></li> <li><a href="#">Dịch vụ</a></li> <li><a href="#">Thị trường</a></li> <li><a href="#">Đầu tư </a></li> </ul> </li> <li><a href="#">Văn hóa</a> <ul> <li><a href="#">Hoa hậu</a></li> <li><a href="#">Nghệ sỹ</a></li> <li><a href="#">Âm nhạc</a></li> <li><a href="#">Thời trang</a></li> <li><a href="#">Điện ảnh</a></li> <li><a href="#">Mỹ thuật</a></li> <li><a href="#">Văn học</a></li> </ul> </li> <li><a href="#">Hồn việt</a> <ul> <li><a href="#">Cảnh quan Đất Việt </a></li> <li><a href="#">Làng nghề</a></li> <li><a href="#">Phong tục tập quán</a></li> <li><a href="#">Dấu ấn thời gian</a></li> <li><a href="#">Dư vị Việt Nam</a></li> <li><a href="#">Dấu ấn thời gian </a></li> </ul> </li> </ul> </div> </body> </html>
menu2.html
Html 2017
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#menu ul {
list-style-type: none;
}
#menu>ul>li {
position:relative;
width: 200px;
}
#menu>ul>li>a {
display:block;
width:200px;
border-bottom:1px solid #063;
line-height:40px;
text-decoration:none;
background-color:#09C;
font-family:Tahoma, Geneva, sans-serif;
color:#FF0;
}
#menu ul li>ul{
display:none;
position:absolute;
left:160px;
top:0px;
}
#menu ul li>ul a{
display:block;
width:200px;
border-bottom:1px dotted #063;
line-height:40px;
text-decoration:none;
background-color:#9F9;
font-family:Tahoma, Geneva, sans-serif;
color:#FF0;
}
#menu ul li>ul a:hover{
background-color:#FF6;
color:#063;
}
#menu ul li:hover ul{
display:block;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Tin thế giới</a> </li>
<li><a href="#">Tin trong nước</a>
<ul>
<li><a href="#">Chính trị xã hội</a></li>
<li><a href="#">An ninh pháp luật</a></li>
<li><a href="#">Phóng sự - Ký sự</a></li>
<li><a href="#">Kinh tế xã hội </a></li>
</ul>
</li>
<li><a href="#">Tin nóng</a>
<ul>
<li><a href="#">Tình hình sự kiện</a></li>
<li><a href="#">Trang bị quân đội</a></li>
<li><a href="#">Điểm nóng chiến sự</a></li>
<li><a href="#">Buôn bán vũ khí </a></li>
</ul>
</li>
<li><a href="#">Kinh tế</a>
<ul>
<li><a href="#">Dịch vụ</a></li>
<li><a href="#">Thị trường</a></li>
<li><a href="#">Đầu tư </a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
0 nhận xét:
Post a Comment