原文 简单实用的下拉菜单（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. asp.net mvc3 linq实现数据的增、删、改、查、

    asp.net mvc 3 linq实现数据的增.删.改.查. 添加数据 定义一个对象: public class Student { public int id{get; set;} public ...

  2. Json.Net系列教程 4.Linq To JSON

    原文 Json.Net系列教程 4.Linq To JSON 更改历史 2013-05-31 添加一个FAQ   一.Linq to JSON是用来干什么的? Linq to JSON是用来操作JSO ...

  3. C++ 用libcurl库进行http 网络通讯编程

      一.LibCurl基本编程框架libcurl是一个跨平台的网络协议库,支持http, https, ftp, gopher, telnet, dict, file, 和ldap 协议.libcur ...

  4. junit学习笔记（二）：hamcrest和TestSuit

    1. hamcrest hamcrest可以有效增加junit的测试能力,用一些对通俗语言来进行测试. Hamcrest 是一个测试的框架,它提供了一套通用的匹配符 Matcher,灵活使用这些匹配符 ...

  5. 【转】Configuring VM Acceleration on Linux

    Configuring VM Acceleration on Linux Linux-based systems support virtual machine acceleration throug ...

  6. MD5算法【计算文件和字符串的MD5值】

    1. MD5算法是一种散列(hash)算法(摘要算法,指纹算法),不是一种加密算法(易错).任何长度的任意内容都可以用MD5计算出散列值.MD5的前身:MD2.MD3.MD4.介绍工具:CalcMD5 ...

  7. thinkphp中Conf的配置

    -----www ----------admin -------------Conf ----------admin.php ----------Home -------------Conf ---- ...

  8. 64位win8 配置Apache2.4+mod_msgi4.4.21+django1.8.6+python3.4

    学习了很多前人分享的资料,整理如下: 安装步骤: 一.安装python3.4        下载 python-3.4.3.amd64.msi 直接安装         地址:https://www. ...

  9. Eclipse中DTD验证导致无法进行代码提示的问题(转)

    eclipse的xml插件进行dtd验证的时候由于找不到dtd或请求主机相应超时,会出现黄色的警告 The file cannot be validated as the host "www ...

  10. background-position 个人理解

    background-position这里先说像素  百分比比较复杂background-position:xxpx xxpx  这里第一个值指的是x轴坐标  第二个值是y轴坐标这里使用的坐标系和数学 ...