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

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. Linux设置DNS地址及清理DNS缓存方法

    1.设置DNS地址 编辑vim /etc/resolv.conf 文件. 增加DNS地址:nameserver ip. 2.清理DNS缓存 清理dns缓存: 通过重启nscd服务来达到清理dns缓存的 ...

  2. SSE图像算法优化系列十六：经典USM锐化中的分支判断语句SSE实现的几种方法尝试。

    分支判断的语句一般来说是不太适合进行SSE优化的,因为他会破坏代码的并行性,但是也不是所有的都是这样的,在合适的场景中运用SSE还是能对分支预测进行一定的优化的,我们这里以某一个算法的部分代码为例进行 ...

  3. memcached 与 redis 的区别和具体应用场景

    1. Memcached简介 Memcached是以LiveJurnal旗下Danga Interactive公司的Bard Fitzpatric为首开发的高性能分布式内存缓存服务器.其本质上就是一个 ...

  4. mysql DML DDL DCL

    DML(data manipulation language):  它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作的语言  D ...

  5. IDEA的配置文件访问

    问题起源 IDEA中当前模块的配置文件无法被访问,只能够访问到外层的Project的配置文件.具体情形可表示如下: Project --------------- project.properties ...

  6. centos ELK安装

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn ELK是进行日志收集分析用的,具体工作.原理.作用自行google. ...

  7. 原生Java代码拷贝目录

    拷贝.移动文件(夹),有三方包commons-io可以用,但是有时候有自己的需求,只能使用原生java代码,这时可以用以下几种方式进行拷贝: 1.使用系统命令(Linux)调用 此种方式对操作系统有要 ...

  8. Caused by: java.lang.ClassCastException: org.springframework.web.SpringServletContainerInitializer cannot be cast to javax.servlet.ServletContainerInitializer错误解决办法

    严重: Failed to initialize end point associated with ProtocolHandler ["http-bio-8080"] java. ...

  9. 来了解并防范一下CSRF攻击提高网站安全

    看一下我从网上找的原理图,结合举例描述,多看一遍你就知道怎么回事了. CSRF是什么呢?CSRF全名是Cross-site request forgery,是一种对网站的恶意利用,CSRF比XSS更具 ...

  10. SecureCRT + Tmux 分屏 高效开发

    最近发现了SecureCRT的一些好玩的功能, 具体如下: 1. 发送消息到所有的终端 首先选中查看-->交互窗口 此时会看到下面出现一个输入窗口 然后, 右击选择"发送交互到所有标签 ...