您现在的位置:小学生自学网>> 信息>> 学习电脑

动易首页下拉菜单的制作_DIV实现下拉菜单

作者: 来源: 发布时间:2012年08月03日 点击数:
 

很多用户想实现自定义下拉菜单,其他不说了,看下面吧,CSS都已经注释。

在风格管理里面添加下面的CSS,直接把下面 CSS代码 复制到风格最底部即可:

css代码:/*下拉菜单样式*/

*{margin:0;padding:0;border:0;}
#div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;}  /*定义总体宽度、高度;background:003399; 控制背景颜色,居中对齐*/
#nav { line-height: 20px; list-style-type: none; margin-top:5px;}         /*控制一级菜单行高;上边距5px;*/  
#nav a { display: block; width: 77px; text-align:center; font-size:12px;} /*一级菜单链接总体样式:每个菜单的宽,居中对齐,文字大小*/
#nav a:link  { color:#FFF; text-decoration:none;margin:0;}     /* 未访问的链接 */  
#nav a:visited  {color:#FFF;text-decoration:none;margin:0;}    /* 已访问的颜色 */ 
#nav a:hover {color:#C00;text-decoration:none;}                /* 鼠标在链接上 */

#nav li {float: left;}                   /* 一级菜左对齐 */
#nav li a:hover{background:#FFFFFF;}     /* 鼠标在一级菜单上改变其背景色 */
#nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;}             /*二级菜单总体样式:行高24px;背景颜色;外框宽度;相对位置;边框一个象素,上边没样式,左右下边实线,边框颜色#003399;内边距1个象素*/

#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;}                 /* 二级菜单链接样式;背景宽度、左对齐,左缩进2 */
#nav li ul a:link  {color:#0d5097; text-decoration:none;}                                   /* 未访问的链接 */
#nav li ul a:visited  {color:#0d5097;text-decoration:none;}                                 /* 已访问的链接 */
#nav li ul a:hover  {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}/* 鼠标在链接上 */

#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

把下面代码插入模板里面,你想要显示的地方:

DIV代码:<script type=text/javascript>
<!--
function menuFix() {
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onMouseDown=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onMouseUp=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
        }
    }
}
window.onload=menuFix;
//--></script>

<div id=div_center>
<UL id=nav>
<LI style="MARGIN-LEFT: 10px"><A href="{$InstallDir}index.asp">网站首页</A></LI>
<LI><A href="{$InstallDir}news/Index.asp">新闻中心</A>
<UL>
<LI><A href="{$InstallDir}news/ShowClass.asp?ClassID=1">·新闻中心</A></LI>
<LI><A href="{$InstallDir}news/ShowClass.asp?ClassID=2">·新闻中心</A></LI>
<LI><A href="{$InstallDir}news/ShowClass.asp?ClassID=3">·新闻中心</A></LI></UL></LI>
<LI><A href="#">企业简介</A>
<UL>
<LI><A href="{$InstallDir}qyjj/ShowArticle.asp?ArticleID=4">·企业简介</A></LI>
<LI><A href="{$InstallDir}qyjj/ShowArticle.asp?ArticleID=5">·企业简介</A></LI>
<LI><A href="{$InstallDir}qyjj/ShowArticle.asp?ArticleID=6">·企业简介</A></LI>
<LI><A href="{$InstallDir}qyjj/ShowArticle.asp?ArticleID=7">·企业风采</A></LI>
<LI><A href="{$InstallDir}qyjj/ShowArticle.asp?ArticleID=8">·企业简介</A></LI>
<LI><A href="{$InstallDir}qyjj/ShowArticle.asp?ArticleID=6">·企业简介</A></LI></UL></LI>
<LI><A href="{$InstallDir}Article/">文章中心</A>
<UL>
<LI><A href="{$InstallDir}Article/ShowClass.asp?ClassID=7">·文章中心</A></LI>
<LI><A href="{$InstallDir}Article/ShowClass.asp?ClassID=8">·文章中心</A></LI>
<LI><A href="{$InstallDir}Article/ShowClass.asp?ClassID=9">·文章中心</A></LI>
<LI><A href="{$InstallDir}Article/ShowClass.asp?ClassID=10">·文章中心</A></LI>
<LI><A href="{$InstallDir}Article/ShowClass.asp?ClassID=11">·文章中心</A></LI></UL></LI>
<LI><A href="{$InstallDir}wnews/">国际新闻</A>
<UL>
<LI><A href="{$InstallDir}wnews/ShowClass.asp?ClassID=12">·国际新闻</A></LI>
<LI><A href="{$InstallDir}wnews/ShowClass.asp?ClassID=13">·国际新闻</A></LI>
<LI><A href="{$InstallDir}wnews/ShowClass.asp?ClassID=14">·国际新闻</A></LI>
<LI><A href="{$InstallDir}wnews/ShowClass.asp?ClassID=15">·国际新闻</A></LI>
<LI><A href="{$InstallDir}wnews/ShowClass.asp?ClassID=16">·国际新闻</A></LI>
<LI><A href="{$InstallDir}wnews/ShowClass.asp?ClassID=17">·国际新闻</A></LI>
<LI><A href="{$InstallDir}wnews/ShowClass.asp?ClassID=18">·国际新闻</A></LI>
<LI><A href="{$InstallDir}wnews/ShowClass.asp?ClassID=19">·国际新闻</A></LI></UL></LI>
<LI><A href="{$InstallDir}Photo/">图片中心</A>
<UL>
<LI><A href="{$InstallDir}Photo/ShowClass.asp?ClassID=20">·图片中心</A></LI>
<LI><A href="{$InstallDir}Photo/ShowClass.asp?ClassID=21">·图片中心</A></LI>
<LI><A href="{$InstallDir}Photo/ShowClass.asp?ClassID=22">·图片中心</A></LI></UL></LI>
<LI><A href="{$InstallDir}Soft/Index.asp">下载中心</A>
<UL>
<LI><A href="{$InstallDir}Soft/ShowClass.asp?ClassID=23">·常用软件</A></LI>
<LI><A href="{$InstallDir}Soft/ShowClass.asp?ClassID=24">·文档下载</A></LI>
<LI><A href="{$InstallDir}Soft/ShowClass.asp?ClassID=25">·资料下载</A></LI></UL></LI>
<LI><A href="{$InstallDir}GuestBook/">留言中心</A></LI>
<LI><A href="{$InstallDir}bbs/">社区论坛</A> </LI></UL>
</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

上面的连接地址自己进行修改了。

实现的效果如下:

效果图

 

 

 

 

 

 

 

 

 

 

 

 

 

是不是很简单呢! 

在补充一句,如果要在IE上面整个居中,就要在模板最顶部加上下面的代码,我在 Firefox 可以不加,但在IE上就要加哦:

补充代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">