CSS+JS下拉菜单菜单导航__脚本特效_后台技术飞飞Asp技术乐园

＞设为首页

＞收藏本站

＞最新电影

首页运营资讯今日英语图形图像计算机技术 Asp编程网站结构化资源共享休闲娱乐访问新站

您现在的位置：首页=>后台技术=>脚本特效=>菜单导航

订阅本栏目

CSS+JS下拉菜单

时间： 2008-04-14 18:05:57　阅读次数：3407

CSS+JS下拉菜单

<html>
<head>
<title>下拉菜单</title>
<style type="text/css">
<!--

*{margin:0;padding:0;border:0;}/*要定义margin属性为0px;否则下拉会居中*/

body { font-family: arial, 宋体, serif; font-size:12px;}

/*下列菜单样式*/
#menu { width:778px; height:22px;margin:auto; background:#07AEFF}
#nav {line-height: 22px;list-style: none; background:#666;}
#nav a {display: block; width: 80px; text-align:center;}
#nav a:link  {color:#fff; text-decoration:none;}
#nav a:visited  {color:#fff;text-decoration:none;}
#nav a:hover  {color:#FFF;text-decoration:none;}
#nav li {float: left; width: 80px; background:#07AEFF;}/*首层背景色*/
#nav li a:hover{background:08AEFF;}/*经过背景色*/

#nav li ul {line-height: 22px; list-style-type: none;text-align:left;left: -999em; width: 100px; position: absolute;}
#nav li ul li{float: left; width: 100px;background:#ECECEC; border:1px solid #07AEFF; border-top:none;border-right:none}/*下拉列表层背景色,属性*/

#nav li ul a{display: block; width: 84px;text-align:left;padding-left:16px;}
#nav li ul a:link  {color:#666; text-decoration:none;}
#nav li ul a:visited  {color:#666;text-decoration:none;}
#nav li ul a:hover  {color:#F3F3F3;text-decoration:none;font-weight:normal;}/*下拉列表层经过属性*/

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

/*下列菜单结束*/
-->
</style>

<script type=text/javascript><![CDATA[//><!]]></script>

</head>
<body>

<div id="menu">
<ul id="nav">
<li><a href="#">火影忍者</a>
    <ul>
    <li><a href="#">佐助</a></li>
    <li><a href="#">鸣人</a></li>
    <li><a href="#">小樱</a></li>
    <li><a href="#">卡卡西</a></li>
    <li><a href="#">自来也</a></li>
    <li><a href="#">大蛇丸</a></li>
    </ul>
</li>

<li><a href="#">幽游白书</a>
    <ul>
    <li><a href="#">幽助</a></li>
    <li><a href="#">飞影</a></li>
    <li><a href="#">藏马</a></li>
    <li><a href="#">桑原</a></li>
    <li><a href="#">幻海</a></li>
    </ul>
</li>
<li><a href="#">死神</a>
    <ul>
    <li><a href="#">一护</a></li>
    <li><a href="#">剑八</a></li>
    <li><a href="#">朽木</a></li>
    <li><a href="#">雨龙</a></li>
    </ul>
</li>
<li><a href="#">海贼王</a>
    <ul>
    <li><a href="#">路飞</a></li>
    <li><a href="#">山治</a></li>
    <li><a href="#">卓洛</a></li>
    <li><a href="#">乔巴</a></li>
    </ul>
</li>
<li><a href="#">七龙珠</a>
    <ul>
    <li><a href="#">孙悟空</a></li>
    <li><a href="#">短笛</a></li>
    <li><a href="#">布欧</a></li>
    <li><a href="#">小林</a></li>
    <li><a href="#">布尔玛</a></li>
    </ul>
</li>
<li><a href="#">其他动漫</a>
    <ul>
    <li><a href="#">阿拉蕾</a></li>
    <li><a href="#">灌篮高手</a></li>
    <li><a href="#">棒球英豪</a></li>
    <li><a href="#">幸运星</a></li>
    </ul>
</li>
</ul>
</div>

</body>
</html>

提示：您可以先修改部分代码再运行

下一篇支持xthml的滑门滑块效果

上一篇可以拖动的菜单

本栏目最新

栏目最新列表

使用jquery实现的简单下拉菜单（下拉框）效

简单的下拉菜单效果

div+css能在ie7/ie7/Firefox下运行的菜单导

同一个页面可以多次使用的选项卡

非常酷的菜单管理效果

网站优化策划

栏目最新列表

增加网站外链的快速方法

网站上线前必做的30个检查

新的友情链接参考标准（没有google的PR情况

优化Google的AdSense广告的五个工具

王通讲SEO八大基础

站点最新

站点最新列表

微博推广的一些技巧

xhEditor v1.1.7 发布，

收集的一些轻量级非常实

50个新鲜兼容最新版本的

javascript中cookie的设

Excel中出现#VALUE!、#D

jquery插件:飞飞表情插件

十个使用HTML5开发的精彩

支持HTML5的浏览器有哪些

飞妮莫属:漫画：如何写出

历史最热10条信息

MIME介绍及 [1] [2] [3]

巧用Google和迅雷来下载

Transact SQL 常 [1] [2]

VIA Rhine II Fast Ethe

电脑常用端 [1] [2] [3]

Do you get a kick out

十道羊皮卷欣赏+mp3版+

每日一句：A friend and

每日一句：Theres no tu

经典__悟透JavaScript

width=

伟哥博客西安房产 123最新电影三四六四

关于站点 | 免责声明 | 联系站长 | 网站地图 | 陕ICP备07002804号 WEB技术QQ交流群：72840059

©2007 ffasp.com. 版权所有