原文 简单实用的下拉菜单（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. 怪兽z主机标准版视频测试。

    我的淘宝店很早就开张了,但是一直没有好好打理,这次给大家带来的是本店所售一款主机的视频测试. CPU:AMD -A10 6700 主板:映泰Hi-Fi A88S3E 内存条:正品金士顿骇客游戏神条 机 ...

  2. PROTEL99生成GERBER的操作说明

    GBL BOTTOM LAYER(底层布线图)GBO BOTTOM OVERLAYER(底层丝印层)GBP BOTTOM PASTE LAYER(底层锡膏层)GBS BOTTOM SOLDER MAS ...

  3. 使用Lock实现信号量

    public class SemaphoreOnLock {     private final Lock lock = new ReentrantLock();         private fi ...

  4. java程序获得SqlServer数据表的表结构

    /**   * 取得一张表的结构信息   * 使用DatabaseMetaData与ResultSetMetaData结合的方式获取全部属性   * @param conn   数据连接   * @p ...

  5. Objective-c 方法的调用

    在书写了类的声明和实现后,应用程序如何去调用它呢? 在Objective-c中,调用方法的简单格式如下: 1⃣   [实例  方法];    如: [person setAge:32];  其中 pe ...

  6. 【转】 利用spring的profile切换不同的环境

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  7. STL之stack（栈）

    栈(statck)这种数据结构在计算机中是相当出名的.栈中的数据是先进后出的(First In Last Out, FILO).栈只有一个出口,允许新增元素(只能在栈顶上增加).移出元素(只能移出栈顶 ...

  8. oracle修改数据库语言

    alter session set nls_language = 'simplified chinese'; alter session set nls_language = 'american'; ...

  9. php随笔6-thinkphp OA系统 JS 实时显示当前时间

    不多说,直入主题: JS. // JavaScript Document function showtime() { var today,hour,second,minute,year,month,d ...

  10. mysql里的sql函数

    仅作为自己忘记时的查询 时间 now() 返回当前年-月-日 时:分:秒格式的时间 UNIX_TIMESTAMP() 当前的uninx时间戳 date_format(date,格式) date是年月日 ...