原文 简单实用的下拉菜单（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. Ibatis入门基本语法（转） good

    Ibatis入门基本语法 一个项目中在写ibatis中的sql语句时,where user_id in (#user_id_list# ), 运行时总是不行,后来上网查了查,才知道这里不该用#,而应该 ...

  2. Android 中文API （66） —— BluetoothClass.Device

    前言 本章内容是android.bluetooth.BluetoothClass.Device,为Android蓝牙部分的章节翻译,版本为Android 2.3   r1,翻译来自中山大学的" ...

  3. jQuery也能舞出绚丽的界面（完结篇）

    ThematicMap又增加了两种Chart类型,现在总算是齐全了,效果也出来了,与大家分享一下: 1.MultiSelect选择界面: 颜色框是可以选择颜色的: 2.生成的饼图效果: 3.生成的柱状 ...

  4. linux下内存调试工具——valgrind

    1.valgrind之memcheck  最常用的工具,用来检测程序中出现的内存问题,所有对内存的读写都会被检测到,一切对malloc()/free()/new/delete的调用都会被捕获.所以,它 ...

  5. BlokUI的使用

    1.点击弹出层以外的区域关闭弹出层 $(document).ready(function() {     $('#demo9').click(function() {         $.blockU ...

  6. BZOJ 1627: [Usaco2007 Dec]穿越泥地( BFS )

    BFS... --------------------------------------------------------------------------------------- #incl ...

  7. js 完成单继承

    //1.使用prototype完成单继承. //定义一个A类 function A(){ } //为A类动态调用属性color,与方法sayColor A.prototype.color = &quo ...

  8. 网站压力测试工具之WebBench

    1 Web Bench简介 WebBench是有名的网站压力测试工具,由Lionbridge公司开发,最多可以模拟3万个并发连接去测试网站的负载能力. Webbech能测试处在相同硬件上,不同服务的性 ...

  9. VMWare11虚拟机安装OSX10.9系统资源下载及问题解决

    适配VMware11的MacOSX补丁: http://pan.baidu.com/s/1bnqgtDd 使用方法:将补丁解压到一个完全没有中文的目录下,以管理员方式运行目录中的win-install ...

  10. r语言之散点图绘制及参数

    一个简单的例子: > plot(cars$dist~cars$speed,+ main="车位移与速度的关系",+ xlab="速度",+ ylab=&q ...