不多说，直接贴代码哈！有疑问，可追加评论哈！

demo.html:

<!DOCTYPE html>
<html>
<head>
　　<title>分类导航菜单</title>
　　<meta charset="utf-8">
　　<meta name="keywords" content="keyword1,keyword2,keyword3">
　　<meta name="description" content="this is my page">
　　<meta name="content-type" content="text/html; charset=UTF-8">
　　<link href="css/demo.css" rel="stylesheet" text="text/css"/>
</head>
<body>
　　<nav>
　　　　<ul>
　　　　　　<li></li>
　　　　　　<li><a href="#">新闻热点</a></li>
　　　　　　<li><a href="#">招聘求职</a></li>
　　　　　　<li><a href="#">问答求助</a></li>
　　　　　　<li><a href="#">生活服务</a></li>
　　　　　　<li><a href="#">开心灌水</a></li>
　　　　　　<li><a href="#">商务合作</a></li>
　　　　　　<li><a href="#">教育培训</a></li>
　　　　　　<li><a href="#">创业专区</a></li>
　　　　</ul>
　　</nav>
</body>
</html>

demo.css:

@CHARSET "UTF-8";
*{padding:0;margin:0;}
nav{border:1px solid #BCFF1D;font-size:12px;background:#D6FF8C url(../images/background.gif)
no-repeat top left;float:left;height:128px;}
nav ul{list-style:none;width:312px;margin:2px;}
nav ul li{width:104px;float:left;height:45px;text-align:center;line-height:35px;}
nav ul li a{background:url(../images/menu.gif) no-repeat;display:block;text-decoration:none;color:black;padding-left:18px;}
nav ul li a:hover,nav ul li a:active{background-position:0px -55px;color:#ff3300;font-weight:bold;}

Effect picture：

源码文件下载：分类导航菜单.zip

分类导航菜单的制作（附源码）--HTML的更多相关文章

  1. 【Android初级】如何动态添加菜单项（附源码+避坑）

    我们平时在开发过程中,为了灵活多变,除了使用静态的菜单,还有动态添加菜单的需求.今天要分享的功能如下: 在界面的右上角有个更多选项,点开后,有两个子菜单:关于和退出 点击"关于", ...

  2. C#/ASP.NET MVC微信公众号接口开发之从零开发（四） 微信自定义菜单(附源码)

    C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...

  3. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

  4. openlayers4 入门开发系列之地图导航控件篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. Redrain 通用菜单控件使用方法和说明（附源码和demo）

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42889709 大概半年前我写过博客说明怎么改造duilib的原代Menu ...

  6. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  7. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  8. Ext.NET 4.1 系统框架的搭建(后台) 附源码

    Ext.NET 4.1 系统框架的搭建(后台) 附源码 代码运行环境:.net 4.5  VS2013 (代码可直接编译运行) 预览图: 分析图: 上面系统的构建包括三块区域:North.West和C ...

  9. （转）干货｜这篇TensorFlow实例教程文章告诉你GANs为何引爆机器学习？（附源码）

    干货|这篇TensorFlow实例教程文章告诉你GANs为何引爆机器学习?(附源码) 该博客来源自:https://mp.weixin.qq.com/s?__biz=MzA4NzE1NzYyMw==& ...

随机推荐

  1. 在ASP.NET MVC中使用Web API和EntityFramework构建应用程序

    最近做了一个项目技术预研:在ASP.NET MVC框架中使用Web API和EntityFramework,构建一个基础的架构,并在此基础上实现基本的CRUD应用. 以下是详细的步骤. 第一步 在数据 ...

  2. strcpy和strcat易忽略点

    首先来看一段C程序: #include <stdio.h> #include <string.h> #include <stdlib.h> void GetMem( ...

  3. 反反爬虫 IP代理

    0x01 前言 一般而言,抓取稍微正规一点的网站,都会有反爬虫的制约.反爬虫主要有以下几种方式: 通过UA判断.这是最低级的判断,一般反爬虫不会用这个做唯一判断,因为反反爬虫非常容易,直接随机UA即可 ...

  4. Jenkins 登录信息无效。请重试。

    刚开始安装的时候没有问题,去 D:\jenkins\secrets下找到initialAdminPassword这个文件 输入里面的密码就行 隔了一段时间登陆,登陆不上去了,这时候,可以去 D:\je ...

  5. Socket网络通信之数据传递

    Socket通信的步骤: 1.创建ServerSocket和Socket 2.打开连接到Socket的输入/输出流 3.按照协议对Socket进行读/写操作 4.关闭输入输出流.关闭Socket 服务 ...

  6. Java经典编程题50道之十九

    打印出如下图案(菱形)        *      ***    ******  ********    ******      ***        * public class Example19 ...

  7. Java经典编程题50道之十五

    输入三个整数x,y,z,请把这三个数由小到大输出. public class Example15 {    public static void main(String[] args) {       ...

  8. 聚类-K均值

    数据来源:http://archive.ics.uci.edu/ml/datasets/seeds 15.26 14.84 0.871 5.763 3.312 2.221 5.22 Kama 14.8 ...

  9. [Essay] Apache Flink：十分可靠，一分不差

    Apache Flink:十分可靠,一分不差 Apache Flink 的提出背景 我们先从较高的抽象层次上总结当前数据处理方面主要遇到的数据集类型(types of datasets)以及在处理数据 ...

  10. 最简化搭建yum仓库

    在使用rpm安装软件包时,时常会遇到一些软件依赖性问题,如果是简单的一两个依赖性还是可以手动解决.要是出现大量的依赖性问题的话会让增大工作量.yum是一个很好的前端程序,可解决软件包相关依赖性,可在多 ...