简单实用的下拉菜单（CSS+jquery）
2024-08-28 20:44:01
没什么可以说的，直接上例子
html+jquery代码
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>企业网站下拉式导航栏示例</title>
<link rel="stylesheet" type="text/css" href="style/comm.css"/>
<link rel="stylesheet" type="text/css" href="style/layout.css"/>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#nav>ul>li").hover(function(){
$(this).children("ul").show();
},function(){
$(this).children("ul").hide(); });
});
</script>
</head> <body>
<div id="wrap"> <div id="nav">
<ul>
<li><a href="#">网站首页</a>
<ul>
<li><a href="#" alt="访问公司博客">公司博客</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>
</ul>
</li>
<li><a href="#">网站新闻</a>
<ul>
<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="#">flash作品</a></li>
<li><a href="#">AI作品</a></li>
<li><a href="#">插画设计</a></li>
</ul> </li>
<li><a href="#">项目报价</a>
<ul>
<li><a href="#">网站作品报价</a></li>
<li><a href="#">flash作品报价</a></li>
<li><a href="#">AI作品报价</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>
</div>
</body>
</html>
CSS代码
comm.css(重置一些常规样式)
@charset "utf-8";
/* CSS Document */
/*
用户重置常规样式
*/
*{margin:0;
padding:0} body{
font-size:62.5%;
} a{ text-decoration:none;} ul,ol{ list-style-type:none;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;}
layout.css(用于布局)
@charset "utf-8";
/* CSS Document */
#wrap{
width:1000px;
margin:0 auto;
}
#nav{
font-family:"微软雅黑";
font-size:1.5em;
height:30px;
background:rgb(195,218,249);
}
#nav ul{width:100%;background:rgb(195,218,249);}
#nav ul li{float:left; position:relative;}
#nav ul li a{display:block;width:120px;height:30px;line-height:30px; text-align:center; background:rgb(195,218,249);color:#000;}
#nav ul li a:hover{background:rgb(255,229,179);color:#000;}
#nav ul li ul{ position:absolute;top:30px;left:0px; display:none;border:1px solid #ccc;margin-bottom:-3px;width:120px;}
#nav ul li ul li{float:none; border-bottom:1px solid #ccc;}
#nav ul li ul li a{background:rgb(246,246,246);color:#000;display:block;}
#nav ul li ul li a:hover{background:rgb(255,229,179);color:#000;}
上效果图
最新文章
- shell脚本中的几个括号总结(小括号/大括号/花括号)--from:http://www.cnblogs.com/hanyan225/archive/2011/10/06/2199652.html
- Centos 内存占满 释放内存
- Problem list
- tableview的顶部有一部分空白区域，并不是Cell的解决方法。
- curl模拟Http请求
- Spark视频 王家林 Spark公开课大讲坛第二期： Spark的Shark和SparkSQL
- 【动态规划】Vijos P1121 马拦过河卒
- js中apply和call的用法 以及apply的妙用 （来自网络）
- Aandroid Error之 新导入工程报Unable to resolve target 'android-18'和R cannot be resolved
- excel_VB宏脚本_批量生成点餐宝接受的格式
- 实现一个简单的Log框架
- 17个新手常见Python运行时错误
- openstack pike 使用 linuxbridge + vxlan
- SpringBoot使用@Cacheable实现最简单的Redis缓存
- js 获取纯web地址栏中URL传参
- C#项目中操作Excel文件——使用NPOI库
- 转：centos7搭建jenkins小记
- VS Code +node npm 调试 js
- Hadoop MapReduce Task Log 无法查看syslog问题
- springboot常用注解