原文 简单实用的下拉菜单（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. linq to entity asp.net mvc 多字段排序

    字段1 降序 字段2 降序 var str = db.xxx.OrderByDescending(p=>p.字段1).ThenByDescending(p=>p.字段2) ThenBy - ...

  2. 转: bower 客户端库管理工具

    概述 常用操作 库的安装 库的搜索和查看 库的更新和卸载 列出所有库 配置文件.bowerrc 库信息文件bower.json 相关链接 概述 注:bower下载安装依赖库实际上是使用git进行下载. ...

  3. Hello China操作系统STM32移植指南（三）

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

  4. BZOJ 3211 花神游历各国 （树状数组+并查集）

    题解:首先,单点修改求区间和可以用树状数组实现,因为开平方很耗时间,所以在这个方面可以优化,我们知道,开平方开几次之后数字就会等于1 ,所以,用数组记录下一个应该开的数,每次直接跳到下一个不是1的数字 ...

  5. CodeForces 150B- Quantity of Strings 推算..

    假设 k = 5 , n>k ,   (1,2,3,4,5)  -> 1=5,2=4,3任意 (2,3,4,5,6) -> 2=6,3=5,4任意...综合上面的可得出1=3=5,2 ...

  6. centos 安装 erlang

    1.首先下载erlang 安装源文件 可以在官网上下载 : http://www.erlang.org/   官网上提供多个版本:   2.下载完成后将R16B01 Source File对应的 ot ...

  7. 1.自己写一个计算器demo

    知识点: 1.System.Math.Pow() 实现乘方 2.实现计算器的运算优先级,依次调用的流程 问题: 还未实现“()”功能 解决方案 UI:

  8. react的初涉入

    1.react并不是一个完整的MVC,MVVM框架 它只负责view层 2.react跟Web Components不冲突 3.react的特点是“轻” 4.react用组件的方式重新思考构建UI的过 ...

  9. CocoaPods对于不同Target引入不同的第三方库Podfile的写法

    有的时候我们需要建立多个Target来完成不同的测试环境的区分,而多个Target之间可能会有第三方库的不同引用,如果我们在使用CocoaPods管理我们的第三方库的时候,我们就需要思考我们需要如何实 ...

  10. java中只能有一个实例的类的创建

    Java中,如果我们创建一个类,想让这个类只有一个对象,那么我们可以 1:把该类的构造方法设计为private 2:在该类中定义一个static方法,在该方法中创建对象 package test; / ...