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

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. 解决xshell评估期已过的问题

    问题:时间长没有打开xshell,今天突然打开提示评估期已过,如下图所示: 点击采购会弹出购买的界面,(对于我们这些程序屌怎么会花899购买一款软件)点击取消就会退出. 解决方法: 卸载这个要收费的版 ...

  2. Orleans之EventSourcing

    Orleans之EventSourcing 这是Orleans系列文章中的一篇.首篇文章在此 引入: 如果没有意外,我再这篇文章中用ES代替EventSourcing,如果碰到"事件回溯&q ...

  3. 使用Scanner获取键盘输入

    使用Scanner类可以很方便地便获取用户的键盘输入,Scanner是一个基于正则表达式的文本扫描器,它可以从文件.输入流 .字符串中解析出基本类型值和字符串值.Scanner类提供了多个构造器,不同 ...

  4. 随机手机号和身份证号码(python)

    在使用selenium2 python自动化过程中,用户添加的时候程序设置的手机号和身份证号码是唯一的,这方面python代码可以实现,以下是调试成功,可以实现的. 具体代码如下 身份证需要下载dis ...

  5. mac qq怎么删除全部聊天记录

    找到 ./Users/user/Library/Containers/com.tencent.qq/ 删除com.tencent.qq文件夹就行.

  6. vagrant启动报错The following SSH command responded with a no

    vagrant package打包生成box,以这个box为基础模板,打造vagrant环境,启动vagrant报错 angel:vagrant $ vagrant up Bringing machi ...

  7. 使用js dom和jquery分别实现简单增删改

    <html><head> <meta http-equiv="Content-Type" content="text/html; chars ...

  8. ubuntu16.04 python3 安装selenium及环境配置

    环境 ubuntu16.04 python3 安装selenium sudo pip3 install seleium 默认安装完是支持firefox,但是更新得太慢对于较新的firefox已经不支持 ...

  9. Sphinx下载、安装、配置、Hello World、文档阅读

    sphinx下载.安装.配置.Hello World.查看文档

  10. Photoshop CC 常用快捷方法有哪些？

    Photoshop CC 常用快捷方法有哪些? 属性栏 工具栏 控制面板 绘图区 1. 多个图层如何快速居中? 在 控制面板 中选中多个图层创建 链接图层 在 工具栏 选择 移动工具 在 属性栏 点击 ...