原文 简单实用的下拉菜单（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. oracle如何修改字段类型(oracle总体知识2)

    在一次做开发的时候,遇到需要将数据表的字段类型由number改成varchar,可是该字段又有值, 用  alter table t-name modify cname newType;会报错. 话说 ...

  2. cpu卡,sam卡原理

    第一部分 CPU基础知识一.为什么用CPU卡IC卡从接口方式上分,可以分为接触式IC卡.非接触式IC卡及复合卡.从器件技术上分,可分为非加密存储卡.加密存储卡及CPU卡.非加密卡没有安全性,可以任意改 ...

  3. Qt将窗体变为顶层窗体（activateWindow(); 和 raise() ）

    我们知道,在windows上通过鼠标双击某应用程序图标,该应用程序往往会以顶层窗口的形式呈现在我们面前,但是对于一个已经打开的非顶层窗口,我们怎么将其激活为顶层窗口呢? 要达到激活,这个必须要满足两个 ...

  4. CentOS 6.4下Squid代理服务器的安装与配置,反向代理

    CentOS 6.4下Squid代理服务器的安装与配置 一.简介 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去取得网络信息. Squid是一个缓存Internet 数据的软件 ...

  5. CSS块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  6. 意大利奢侈品牌-Kiton 华丽进驻北京新光天地-时尚生活-泛高尔夫网

    意大利奢侈品牌-Kiton 华丽进驻北京新光天地-时尚生活-泛高尔夫网 意大利奢侈品牌-Kiton 华丽进驻北京新光天地

  7. 分析php获取客户端ip

    用php能获取客户端ip,这个大家都知道,代码如下: /** * 获取客户端ip * @param number $type * @return string */ function getClien ...

  8. Hibernate_13_QBC查询

    Employee类.Department类.SessionFactoryTools类.Employee.hbm.xml文件.Department.hbm.xml文件.Hibernate.cfg.xml ...

  9. php：根据中文裁减字符串函数方法

    define(CHARSET, 'UTF-8'); // 系统默认编码 /** * 根据中文裁减字符串 * @param $string - 字符串 * @param $length - 长度 * @ ...

  10. Objective-c 类的继承 方法重写 方法重载

    一.类的继承 Objective-c中类的继承与C++类似,不同的是Objective-c不支持多重继承,一个类只能有一个父类,单继承使Objective-c的继承关系很简单,易于管理程序. Obje ...