原文 简单实用的下拉菜单(CSS+jquery)

没什么可以说的,直接上例子

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;}

上效果图

简单实用的下拉菜单(CSS+jquery)的更多相关文章

  1. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  2. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  3. 下拉菜单的jquery组件封装

    首先晒出封装好的dropdown.js (function($){ 'use strict';//使用严格模式 //构造函数形式 function Dropdown(elem,options){ // ...

  4. 下拉菜单css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 下拉菜单  - - css

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. CSS技巧分享:如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  7. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  8. 基于CSS3金属风格下拉菜单

    基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/

  9. Bootstrap-CL:按钮下拉菜单

    ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...

随机推荐

  1. Hello China操作系统STM32移植指南(三)

    移植到STM32的源代码,可从下列链接下载: http://download.csdn.net/detail/hellochina15/7049909 包含两个包:一个是移植前的Hello China ...

  2. [cocos2d-x]用CCSpriteBatchNode进行文理贴图的优化

    引言: 我们在进行手机游戏开发的过程中,由于手机的内存资源是有限的,那么对纹理贴图的优化是非常有必要的,有可能相同的功能,优化的好与不好对内存资源的消耗是非常明显的,下面我就用一个例子来说明一下. 说 ...

  3. Python经常使用第三方工具、库、骨架

    Python ImagingLibrary(PIL):它提供强大的图形处理的能力,并提供广泛的图形文件格式支持.该库能进行图形格式的转换.打印和显示.还能进行一些图形效果的处理,如图形的放大.缩小和旋 ...

  4. Objective-c 类接口 (@interface) (类定义)

    在Objective-c中如何定义一个类呢?我们可以使用下面的格式进行表示: @interface 类名:父类名{ 变量定义; } 方法定义: @end; 下面给出一个实例: @interface P ...

  5. BI系统的应用组织思路与数据分析模式

    BI商业智能软件一般都会提供若干数据整合.数据查询.分析与评价.数据可视化及数据分享的手段,但是在BI项目的构建与实施过程中,如果不按照一定的应用组织思路.数据分析模式及分析流程使用这些工具或手段,呈 ...

  6. sql 时间和字符串 取到毫秒级

    (select replace(replace(replace(CONVERT(varchar, getdate(), 120 ),'-',''),' ',''),':','')+(Select ri ...

  7. 找出N^N的最左边的一位数和最后边的一位数

    问题:找出N^N的最左边的一位数和最右边的一个数,N(1<=N<=1,000,000,000). 找最右边一位: 分析:其实找左右边的一位数还挺简单的,快速幂每次都只取结果的最后一位参加下 ...

  8. iOS内存管理 ARC与MRC

    想驾驭一门语言,首先要掌握它的内存管理特性.iOS开发经历了MRC到ARC的过程,下面就记录一下本人对iOS内存管理方面的一些理解. 说到iOS开发,肯定离不开objective-c语言(以下简称OC ...

  9. python成长之路16

    阅读(72) 一:jQuery是一个兼容多浏览器的javascript类库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发, ...

  10. 解决phpmyadmin配置文件的权限问题

    如果部署的phpmyadmin权限为所有人可写,即权限为777,就会报”Wrong permissions on configuration file, should not be world wri ...