Tạo menu ngang sổ dọc tự động

BƯỚC 1 : CHÈN CODE CSS :

/* nav
	--------------------------------------
	*/
	#crosscol-wrapper{
	clear: both;
	background: #14601D;
	width: 960px;
	}
	#nav { /*
	padding:0px 0;
	margin:0px;
	list-style:none;
	width:100%;
	font-size: 130%; */
	margin:0 auto;
	padding: 0 0 0 0px;
	list-style:none;
	font-size: 110%;
	/* background: #15611E;*/
	text-align: center;
	}
	#nav li {
	margin:0;
	padding:0px 0;
	display:block;
	float:left;
	position:relative;
	width:140px;
	text-shadow: 1px 1px #666666;
	}
	#nav li a:link, #nav li a:visited {
	padding:10px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	color:#ffffff;
	width:140px;
	font-weight: bold;
	}
	#nav li:hover a, #nav li a:hover, #nav li a:active{
	padding:10px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	width:140px;
	background-color:#15611E;
	background-image:-moz-linear-gradient(#337C3A,#15611E);
	background-image:-webkit-gradient(linear,0 top,0 bottom,from(#337C3A),to(#15611E));
	filter:none;
	}
	#nav li.selected a{
	border-color:#ffffff;
	/*
	background-color:#e0e0e0;
	background-image:-webkit-gradient(linear,0 top,0 bottom,from(#ffffff),to(#e0e0e0));
	background-image:-moz-linear-gradient(#ffffff,#e0e0e0);
	*/
	background-color:#15611E;
	background-image:-moz-linear-gradient(#337C3A,#15611E);
	background-image:-webkit-gradient(linear,0 top,0 bottom,from(#337C3A),to(#15611E));
	filter:none;
	/*
	filter:none;
	color: #333333;
	text-shadow: none; */
	}
	#nav li ul.subnav {
	margin:0;
	padding:1px 1px 0;
	list-style:none;
	display:none;
	color:#ffffff;
	width:140x;
	position:absolute;
	top:36px;
	left:-1px;
	/* border:1px solid #15611E;
	border-top:none; */
	}
	#nav li:hover ul.subnav {
	display:block;
	}
	#nav li ul.subnav li {
	width:146px;
	clear:left;
	font-size: 90%;
	}
	#nav li ul.subnav li a:link, #nav li ul.subnav li a:visited {
	clear:left;
	background:#15611E;
	padding:10px 0px;
	width:140px;
	border:none;
	/* border-bottom:1px solid #ffffff; */
	position:relative;
	z-index:1000;
	color: #fff;
	}
	#nav li ul.subnav li:hover a, #nav li ul.subnav li a:active, #nav li ul.subnav li a:hover {
	clear:left;
	background:#337C3A;
	padding:10px 0px;
	width:140px;
	border:none;
	/* border-bottom:1px solid #ffffff; */
	position:relative;
	z-index:1000;
	color: #fff;
	}
	#nav li ul.subnav li ul.subsubnav {
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	left:137px;
	top:-2px;
	padding:1px 1px 0 1px;
	border:1px solid #15611E;
	border-left:1px solid #15611E;
	color:#ffffff;
	z-index:900;
	}
	#nav li ul.subnav li:hover ul.subsubnav {
	display:block;
	}
	#nav li ul.subnav li ul.subsubnav li a:link, #nav li ul.subnav li ul.subsubnav li a:visited {
	background:#15611E;
	}
	#nav li ul.subnav li ul.subsubnav li:hover a, #nav li ul.subnav li ul.subsubnav li a:hover, #nav li ul.subnav li ul.subsubnav li a:active {
	background:#337C3A;
	}
	#nav li ul.subnav li a span {
	position:absolute;
	top:0;
	left:132px;
	font-size:12pt;
	color:#fe676f;
	}
	#nav li ul.subnav li:hover a span, #nav li ul.subnav li a:hover span {
	position:absolute;
	top:0;
	left:132px;
	font-size:12pt;
	color:#ffffff;
BƯỚC2:	} <div class='widget-content'> <ul id='nav'> <li><a href='http://www.hoancauviet.com/'>Home</a></li> <li><a href='#' target='_self' title='Tin tức'>Tin tức &#9660;</a> <ul class='subnav'> <li><a href='http://www.hoancauviet.com/search/label/H%E1%BB%99i%20th%E1%BA%A3o%20-%20G%E1%BA%B7p%20g%E1%BB%A1' target='_self' title='Hội thảo'>Hội thảo</a></li> <li><a href='http://www.hoancauviet.com/search/label/H%E1%BB%8Dc%20b%E1%BB%95ng%20du%20h%E1%BB%8Dc' target='_self' title='Học bổng'>Học bổng</a></li> <li><a href='http://www.hoancauviet.com/search/label/Tuy%E1%BB%83n%20sinh%20c%C3%A1c%20n%C6%B0%E1%BB%9Bc' target='_self' title='Tuyển sinh'>Tuyển sinh</a></li> <li><a href='http://www.hoancauviet.com/search/label/Th%C3%B4ng%20tin%20c%C3%A1c%20n%C6%B0%E1%BB%9Bc' target='_self' title='Thông tin du học'>Thông tin du học</a></li> </ul> </li> <li><a href='#' target='_self' title='Châu Á'>Châu Á &#9660;</a> <ul class='subnav'> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20H%C3%A0n%20Qu%E1%BB%91c' target='_self' title='Hàn Quốc'>Hàn Quốc</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Malaysia' target='_self' title='Malaysia'>Malaysia</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Nh%E1%BA%ADt%20B%E1%BA%A3n' target='_self' title='Nhật Bản'>Nhật Bản</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Singapore' target='_self' title='Singapore'>Singapore</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Th%C3%A1i%20Lan' target='_self' title='Thái Lan'>Thái Lan</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Trung%20Qu%E1%BB%91c' target='_self' title='Trung Quốc'>Trung Quốc</a></li> </ul> </li> <li><a href='#' target='_self' title='Châu Âu'>Châu Âu &#9660;</a> <ul class='subnav'> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20H%C3%A0n%20Qu%E1%BB%91c' target='_self' title='Ailen'>Ailen</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Anh' target='_self' title='Anh'>Anh</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20%C4%90%E1%BB%A9c' target='_self' title='Đức'>Đức</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20H%C3%A0%20Lan' target='_self' title='Hà Lan'>Hà Lan</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Nga' target='_self' title='Nga'>Nga</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Ph%C3%A1p' target='_self' title='Pháp'>Pháp</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Ph%E1%BA%A7n%20Lan' target='_self' title='Phần Lan'>Phần Lan</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Th%E1%BB%A5y%20S%E1%BB%B9' target='_self' title='Thụy Sỹ'>Thụy Sỹ</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Ucraina' target='_self' title='Ucraina'>Ucraina</a></li> </ul> </li> <li><a href='#' target='_self' title='Châu Úc'>Châu Úc &#9660;</a> <ul class='subnav'> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20%C3%9Ac' target='_self' title='Australia'>Australia</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20New%20Zealand' target='_self' title='New Zealand'>New Zealand</a></li> </ul> </li> <li><a href='#' target='_self' title='Châu Mỹ'>Châu Mỹ &#9660;</a> <ul class='subnav'> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20Canada' target='_self' title='Canada'>Canada</a></li> <li><a href='http://www.hoancauviet.com/search/label/Du%20h%E1%BB%8Dc%20M%E1%BB%B9' target='_self' title='Mỹ'>Mỹ</a></li> </ul> </li> </ul> <div class='clear'></div>

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

SHARE

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn

• 
• 
• 
• 
•