<!--BIGIN CSS -->
.jqueryslidemenu {
background:transparent url(http://suckhoegiadinh.org/Benhtimmach.com/theme/bgOFF1.gif) repeat-x top left;
border-top:1px solid #ccc;
font-family:Arial,Verdana,Helvitica,sans-serif;
font-size:13px;
font-weight:700;
height:39px;
}
.jqueryslidemenu ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Top level list items*/
.jqueryslidemenu ul li {
display:inline;
float:left;
position:relative;
z-index: 15;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a {
background:transparent url(http://suckhoegiadinh.org/Benhtimmach.com/theme/bgDIVIDER1.gif) no-repeat top right;
color:#666;
display:block;
height:23px;
padding:9px 20px 0;
text-decoration:none;
z-index: 10;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #666;
}
.jqueryslidemenu ul li a:hover {
background:#fff url(http://suckhoegiadinh.org/Benhtimmach.com/theme/bgON1.gif) no-repeat top right;
color:#B30000;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul {
background:#fff;
display:block;
left: -999em;
position:absolute;
visibility:hidden;
z-index: 9999;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li {
display:list-item;
float:none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a {
background:#f5f5f5;
border-bottom:1px solid #e4e4e4;
border-left:1px solid #e4e4e4;
border-right:1px solid #e4e4e4;
border-top-width:0;
font-family:Arial,Verdana,Helvitica,sans-serif;
font-size:12px;
font-weight:700;
margin-top:1px;
width:130px;
}
.jqueryslidemenu ul li ul li a:hover {
background:#fff;
color:#B30000;
font-family:Arial,Verdana,Helvitica,sans-serif;
font-size:12px;
font-weight:700;
}
<!--END CSS -->
BƯỚC 2 : TẠO 1 TIỆN ÍCH HTML ĐỂ BỎ HẾT CODE SAU VÀO :
<!--BEGIN CODE HTML -->
.jqueryslidemenu {
background:transparent url(http://suckhoegiadinh.org/Benhtimmach.com/theme/bgOFF1.gif) repeat-x top left;
border-top:1px solid #ccc;
font-family:Arial,Verdana,Helvitica,sans-serif;
font-size:13px;
font-weight:700;
height:39px;
}
.jqueryslidemenu ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Top level list items*/
.jqueryslidemenu ul li {
display:inline;
float:left;
position:relative;
z-index: 15;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a {
background:transparent url(http://suckhoegiadinh.org/Benhtimmach.com/theme/bgDIVIDER1.gif) no-repeat top right;
color:#666;
display:block;
height:23px;
padding:9px 20px 0;
text-decoration:none;
z-index: 10;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #666;
}
.jqueryslidemenu ul li a:hover {
background:#fff url(http://suckhoegiadinh.org/Benhtimmach.com/theme/bgON1.gif) no-repeat top right;
color:#B30000;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul {
background:#fff;
display:block;
left: -999em;
position:absolute;
visibility:hidden;
z-index: 9999;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li {
display:list-item;
float:none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a {
background:#f5f5f5;
border-bottom:1px solid #e4e4e4;
border-left:1px solid #e4e4e4;
border-right:1px solid #e4e4e4;
border-top-width:0;
font-family:Arial,Verdana,Helvitica,sans-serif;
font-size:12px;
font-weight:700;
margin-top:1px;
width:130px;
}
.jqueryslidemenu ul li ul li a:hover {
background:#fff;
color:#B30000;
font-family:Arial,Verdana,Helvitica,sans-serif;
font-size:12px;
font-weight:700;
}
<!--END CSS -->
BƯỚC 2 : TẠO 1 TIỆN ÍCH HTML ĐỂ BỎ HẾT CODE SAU VÀO :
<!--BEGIN CODE HTML -->
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Bệnh tim mạch</a><ul>
<li>
<a dir="ltr" href="#">
100 loại bệnh tim</a></li>
<li>
<a dir="ltr" href="#">
Yếu tố gây bệnh</a></li>
<li>
<a dir="ltr" href="#">
Phòng bệnh tim mạch</a></li>
<li>
<a dir="ltr" href="#">
Sơ cấp cứu tim mạch</a></li>
<li>
<a dir="ltr" href="#">
Bệnh tăng huyết áp</a></li>
<li>
<a dir="ltr" href="#">
Bệnh huyết áp thấp</a></li>
<li>
<a dir="ltr" href="#">
Bệnh Suy tim</a></li>
<li>
<a dir="ltr" href="#">
Bệnh thấp tim</a></li>
<li>
<a dir="ltr" href="#">
Bệnh đột quỵ</a></li>
<li>
<a dir="ltr" href="#">
Bệnh đột tử</a></li>
<li>
<a dir="ltr" href="#">
Stress và bệnh tim</a></li>
<li>
<a dir="ltr" href="#">
Tình dục - bệnh tim</a></li>
<li>
<a dir="ltr" href="#">
Y học cổ truyền</a></li>
<li>
<a dir="ltr" href="#">
Bệnh tim mạch khác...</a></li>
</ul>
</li>
<li><a href="#">Bệnh liên quan</a><ul>
<li>
<a dir="ltr" href="#">
Bệnh lạ của tim mạch</a></li>
<li>
<a dir="ltr" href="#">
Cường giáp - tim mạch</a></li>
<li>
<a dir="ltr" href="#">
Tim mạch - phụ nữ</a></li>
<li>
<a dir="ltr" href="#">
Tim mạch - mang thai</a></li>
<li>
<a dir="ltr" href="#">
Tiểu đường - tim mạch</a></li>
<li>
<a dir="ltr" href="#">
Bệnh thận - tim mạch</a></li>
<li>
<a dir="ltr" href="#">
Môi trường - tim mạch</a></li>
<li>
<a dir="ltr" href="#">
Di truyền - tim mạch</a></li>
<li>
<a dir="ltr" href="#">
Thời tiết - tim mạch</a></li>
</ul>
</li>
<li><a href="#">Tư vấn</a><ul>
<li>
<a dir="ltr" href="#">Cao huyết áp</a></li>
<li>
<a dir="ltr" href="#">
Bệnh huyết áp thấp </a></li>
<li>
<a dir="ltr" href="#">
Bệnh mạch vành</a></li>
<li>
<a dir="ltr" href="#">
Ngoại tâm thu thất</a></li>
<li>
<a dir="ltr" href="#">
Bệnh nhịp tim nhanh</a></li>
<li>
<a dir="ltr" href="#">
Nhồi máu cơ tim</a></li>
<li>
<a dir="ltr" href="#">
Rối loạn lipid máu</a></li>
<li>
<a dir="ltr" href="#">
Rối loạn nhịp tim</a></li>
<li>
<a dir="ltr" href="#">
Bệnh suy mạch vành</a></li>
<li>
<a dir="ltr" href="#">
Bệnh thiểu năng vành </a></li>
<li>
<a dir="ltr" href="#">
Tim mạch và thể thao </a></li>
<li>
<a dir="ltr" href="#">
Bệnh tim mạch</a></li>
<li>
<a dir="ltr" href="#">
Tư vấn Mổ tim</a></li>
</ul>
</li>
<li><a href="#">Triệu chứng</a>
<ul>
<li>
<a dir="ltr" href="#">
Triệu chứng ngất</a></li>
<li>
<a dir="ltr" href="#">
Triệu chứng đau ngực</a></li>
<li>
<a dir="ltr" href="#">
Chóng mặt</a></li>
<li><a dir="ltr" href="#">
Khó thở</a></li>
</ul>
</li>
<li><a href="#">
Dinh dưỡng</a><ul>
<li>
<a dir="ltr" href="#">
Thể dục phòng bệnh</a></li>
<li>
<a dir="ltr" href="#">
Dinh dưỡng tim mạch</a></li>
</ul>
</li>
<li><a href="#">Tin y tế</a>
<ul>
<li>
<a dir="ltr" href="#">
Tin y tế thế giới</a></li>
<li>
<a dir="ltr" href="#">
Tin y tế việt nam</a></li>
</ul>
</li>
<li><a href="#">Mua máy</a><ul>
<li>
<a dir="ltr" href="#">
Máy tạo nhịp</a></li>
<li>
<a dir="ltr" href="#">
Máy đo huyết áp</a></li>
</ul>
</li>
<li><a href="#">Chỉ số sức khỏe</a><ul>
<li><a href="#">Chỉ số BMI</a></li>
<li><a href="#">Chỉ số chuyển hóa</a></li>
</ul>
</li>
</ul>
<p>
<br style="clear: left" />
</p></div>
<script type="text/javascript">var arrowimages={down:['downarrowclass',23],right:['rightarrowclass']}
var jqueryslidemenu={animateduration:{over:200,out:100},buildmenu:function(menuid,arrowsvar){jQuery(document).ready(function($){var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth,h:this.offsetHeight,subulw:$subul.outerWidth(),subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1?true:false
$subul.css({top:this.istopheader?this._dimensions.h+"px":0})
$curobj.hover(function(e){var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left,top:$(this).offset().top}
var menuleft=this.istopheader?0:this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())?(this.istopheader?-this._dimensions.subulw+this._dimensions.w:-this._dimensions.w):menuleft
if($targetul.queue().length<=1)
$targetul.css({left:menuleft+"px",width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)},function(e){var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)})})
$mainmenu.find("ul").css({display:'none',visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu",arrowimages)
</script>
<!--END CODE HTML -->
LƯU Ý : CÁC BẠN PHẢI THÊM ĐOẠN CODE SAU ĐỀ CHÓNG HIỂN THỊ BỊ LỖI VỚI TRÌNH DUYỆT IE KÉM :
<!--BEGIN CODE CHÓNG HỎNG LINK Ở IE -->
<!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style> <![endif]-->
<!--END>
XIN LƯU Ý THÊM !
Ở
BƯỚC 2 BẠN CÓ THỂ THÊM TRỰC TIẾP CODE VÀO BỘ NGUỒN HTML CHÍNH, TUY NHIÊN CHÚNG TÔI CHỈ KHUYẾN KHÍCH NHỮNG BẠN RÀNH VỀ CODE 1 CHÚT!
CHÚC CÁC BẠN THÀNH CÔNG!
BÀI VIẾT THUỘC BẢN QUYỀN NSVINA.COM - GHI RÕ NGUỒN KHI PHÁT LẠI THÔNG TIN