博客导航栏目的制作和添加

一。首先在首页CSS中加入以下代码：

/*===导航栏菜单设计========*/
.menu {
? display:block;
? position:absolute;
? width:780px;
? left:-184px;
? top:0px;
? color:#FF0000;
}
a.myokmenu,a.myokmenu:visited{
? float:left;
? display:block;
? width:76px;
? height:20px;
? margin:0px;
? padding:2px 0px;
? font-family:tahoma, vardana, arial, sans-serif;
? font-size:12px;
? color:#003366;
? text-align:center;
? line-height:20px;
? text-decoration:none;
? border-left:0px solid #336699;
? border-right:1px solid #336699;
? border-bottom:1px solid #336699;
? border-top:1px solid #336699;
? border-collapse:collapse;
? overflow:hidden;
? background:#bbffff;
? /* filter:progid:DXImageTransform.Microsoft.gradient(startColorStr:#1E90FF,EndColorStr :#1874CD,GradientType:0);*/
filter:progid:DXImageTransform.Microsoft.gradient
(startColorStr:#ffbbffff,EndColorStr :#ff0099CC,GradientType:0);
}
a.myokmenu:hover{
? height:20px;
? margin:0px;
? padding:2px 0px;
? font-size:12px;
? color:#FFFFFF;
? line-height:20px;
? vertical-align:middle;
? text-decoration:none;
? overflow:visible;
? background:#FF00FF;
? filter:progid:DXImageTransform.Microsoft.gradient
(startColorStr:#FFFFFF00,EndColorStr :#ffffff00,GradientType:0);

}
a.myokmenu:hover table{
? display:block;
? background:#eee;
? border-collapse:collapse;
? filter:progid:DXImageTransform.Microsoft.gradient
(startColorStr:#ffE3F0FD,EndColorStr :#ffbbffff,GradientType:0);

}
a.submenu,a.submenu:visited{
? display:block;
? width:74px;
? height:20px;
? font-size: 12px;
? line-height:20px;
? text-align:center;
? text-decoration:none;
? border-bottom:1px solid #003366;
}
a.submenu:hover{
? height:20px;
? font-size:12px;
? line-height:20px;
? background:#add;
? filter:progid:DXImageTransform.Microsoft.gradient
(startColorStr:#ffE3F0FD,EndColorStr :#ffFF00ff,GradientType:0);
}

二。发表一篇日志，置顶就可以了

【打印】