一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

首页游戏下载软件下载专题资讯教程 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

+ -

当前位置：一聚教程网 > 网页特效 > 导航菜单

推荐专题

最新下载

1

3D模拟疯狂赛车
79.14M 类型： 赛车竞速
2

现代战争4(军事射击
1.18GB 类型： 策略塔防
3

魅族影之诗手游
570.15MB 类型： 策略卡牌
4

背包乱斗
87.96M 类型： 动作冒险
5

死亡收藏
100.18M 类型： 动作冒险
6

全境危机
986.9MB 类型： 射击枪战
7

口袋灵兽
8.92M 类型： 角色扮演
8

机甲战争
109.5MB 类型： 休闲益智
9

我变成了妹子2
106.21M 类型： 模拟经营
10

校长我来当
98.61M 类型： 模拟经营

热门教程

1

诛仙2鬼王怎么加点鬼王加点推荐
时间：2025-08-20 类型： 游戏攻略
2

诛仙2见影灵泉奇遇任务怎么做见影灵泉奇遇任务流程攻略
时间：2025-08-20 类型： 游戏攻略
3

三国天下归心诸葛亮怎么样诸葛亮技能介绍一览
时间：2025-08-20 类型： 游戏攻略
4

三国天下归心追击队怎么玩追击队玩法教学
时间：2025-08-20 类型： 游戏攻略
5

三国天下归心武将怎么获得武将获取方法
时间：2025-08-20 类型： 游戏攻略
6

星痕共鸣剧毒蜂巢怎么获取剧毒蜂巢获取攻略
时间：2025-08-20 类型： 游戏攻略
7

新三国志曹操传李儒之影怎么打李儒之影打法教学
时间：2025-08-20 类型： 游戏攻略
8

辉烬队伍怎么搭配配队攻略指南
时间：2025-08-20 类型： 游戏攻略
9

创造吧我们的星球种田玩法怎么玩种田玩法介绍一览
时间：2025-08-20 类型： 游戏攻略
10

华夏千秋怎么表白表白方法一览
时间：2025-08-20 类型： 游戏攻略

简单css导航菜单

时间：2022-07-02 14:56:55 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

简单导航菜单

<link rel="stylesheet" type="text/css" href="style.css">
<div>
<ul>
<li id="td1">
</li>
<li id="td2">
</li>
<li id="td3">
</li>
<li id="td4">
</li>
<li id="td5">
</li>
<li id="td6">
</li>
<li id="td7">
</li>
<li id="td8">
</li>
</ul>
</div>
<style>
* {
	padding: 0 
	margin: 0;
}

ul {
	list-style-type: none;
}

#td1 {
	float:left;
	
	
	background: url(/demo/pic/head_1.jpg) no-repeat;
}

#td2 {
	float:left;
	
	
	background: url(/demo/pic/head_2.jpg) no-repeat;
}

#td3 {
	float:left;
	
	
	background: url(/demo/pic/head_3.jpg) no-repeat;
}

#td4 {
	float:left;
	
	
	background: url(/demo/pic/head_4.jpg) no-repeat;
}

#td5 {
	float:left;
	
	
	background: url(/demo/pic/head_5.jpg) no-repeat;
}

#td6 {
	float:left;
	
	
	background: url(/demo/pic/head_6.jpg) no-repeat;
}

#td7 {
	float:left;
	
	
	background: url(/demo/pic/head_7.jpg) no-repeat;
}

#td8 {
	float:left;
	
	
	background: url(/demo/pic/head_8.jpg) no-repeat;
}

#td1:hover {
	float:left;
	
	
	background: url(/demo/pic/head01_1.jpg) no-repeat;
}

#td2:hover {
	float:left;
	
	
	background: url(/demo/pic/head01_2.jpg) no-repeat;
}

#td3:hover {
	float:left;
	
	
	background: url(/demo/pic/head01_3.jpg) no-repeat;
}

#td4:hover {
	float:left;
	
	
	background: url(/demo/pic/head01_4.jpg) no-repeat;
}

#td5:hover {
	float:left;
	
	
	background: url(/demo/pic/head01_5.jpg) no-repeat;
}

#td6:hover {
	float:left;
	
	
	background: url(/demo/pic/head01_6.jpg) no-repeat;
}

#td7:hover {
	float:left;
	
	
	background: url(/demo/pic/head01_7.jpg) no-repeat;
}

#td8:hover {
	float:left;
	
	
	background: url(/demo/pic/head01_8.jpg) no-repeat;
}

</style>

提示：您可以先修改部分代码再运行

相关文章

热门栏目