电脑店

您现在的位置： 万盛学电脑网 >> 程序编程 >> 网络编程 >> 安卓开发 >> 正文

什么是html5纯CSS的三级联动级联菜单？

作者：佚名    责任编辑：admin    更新时间：2022-06-22

下面我们给大家介绍一下html5纯CSS的三级联动级联菜单吧!希望大家可以在这里学习!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="Chomo" />

<link rel="start" href="

<title>三级级联菜单</title>

<style type="text/css">

* { margin:0; padding:0; list-style:none;}

.c_subNav { width:150px; }

.c_subNav table { width:100%; border-collapse:collapse;}

.c_subNav a { text-decoration:none; color:#333;}

.c_subNav a:hover { color:#f60;}

.c_subNav ul ul { position:absolute; visibility:hidden; right:-150px; top:-1px;}

.c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;}

.c_subNav a.li { position:relative;}

.c_subNav li .option { display:block; line-height:15px; padding:5px 5px 5px 25px; background:no-repeat 5px 4px; cursor:pointer; font:12px Verdana; zoom:1; background:url(img/ico.gif) no-repeat;}

.c_subNav li .option:hover { color:#f60; background-color:#ffa;}

.c_subNav li .option span { display:block; padding-right:15px; background:url(img/ico.gif) no-repeat right 0;}

.c_subNav li .option:hover span { background-position:right -15px;}

.c_subNav .li:hover { z-index:2; background:transparent;}

.c_subNav .li:hover ul { visibility:visible;}

.c_subNav .li:hover ul ul { visibility:hidden;}

.c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;}

.c_subNav .li:hover li { border-bottom:none;}

.c_subNav .li:hover li .option { padding:2px 5px; background:transparent;}

.c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;}

.c_subNav .li:hover li .option:hover span { background-position:right -30px;}

.c_subNav .li:hover .li:hover ul { visibility:visible; left:145px; top:-2px;}

/*---图标差异---*/

.c_subNav .charges .option { background-position:4px -45px;}

.c_subNav .biz .option { background-position:4px -70px;}

.c_subNav .change .option { background-position:4px -95px;}

.c_subNav .score .option { background-position:4px -120px;}

.c_subNav .server .option { background-position:4px -145px;}

.c_subNav .edit .option { background-position:4px -170px;}

.c_subNav .sms .option { background-position:4px -195px;}

</style>

</head>

<body>

<div class="c_subNav">

<ul>

<li class="li charges">

<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->

<a href="#nogo" class="option"><span>话费服务</span></a>

<ul>

<li class="li">

<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->

<a href="#nogo" class="option"><span>话费查询</span></a>

<ul>

<li class="li"><a href="#nogo" class="option">实时话费查询</a></li>

<li class="li"><a href="#nogo" class="option">话费余额查询</a></li>

<li class="li"><a href="#nogo" class="option">月账单查询</a></li>

<li class="li"><a href="#nogo" class="option">月详单查询</a></li>

<li class="li"><a href="#nogo" class="option">缴费历史查询</a></li>

<li class="li"><a href="#nogo" class="option">资费优选推荐</a></li>

</ul>

<!--[if IE 6]></td></tr></table></a><![endif]-->

</li>

<li class="li">

<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->

<a href="#nogo" class="option"><span>定制话费信息</span></a>

<ul>

<li class="li"><a href="#nogo" class="option">定制短信账单</a></li>

<li class="li"><a href="#nogo" class="option">话费余额短信提醒</a></li>

<li class="li"><a href="#nogo" class="option">定制Email账单</a></li>

</ul>

<!--[if IE 6]></td></tr></table></a><![endif]-->

</li>

<li class="li">

<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->

<a href="#nogo" class="option"><span>网上交费</span></a>

<ul>

<li class="li"><a href="#nogo" class="option">网上缴费</a></li>

<li class="li"><a href="#nogo" class="option">充值卡缴费</a></li>

</ul>

<!--[if IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

<!--[if IE 6]></td></tr></table></a><![endif]-->

</li>

<li class="li biz">

<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->

<a href="#nogo" class="option"><span>业务办理</span></a>

<ul>

<li class="li">

<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->

<a href="#nogo" class="option"><span>日常业务办理</span></a>

<ul>

<li class="li"><a href="#nogo" class="option">来电显示</a></li>

<li class="li"><a href="#nogo" class="option">呼叫等待</a></li>

<li class="li"><a href="#nogo" class="option">呼叫转移</a></li>

<li class="li"><a href="#nogo" class="option">三方通话</a></li>

<li class="li"><a href="#nogo" class="option">来电提醒</a></li>

<li class="li"><a href="#nogo" class="option">呼叫保持</a></li>

<li class="li"><a href="#nogo" class="option">呼叫转移设置</a></li>

<li class="li"><a href="#nogo" class="option">主叫隐藏</a></li>

<li class="li"><a href="#nogo" class="option">彩铃</a></li>

<li class="li"><a href="#nogo" class="option">国内漫游</a></li>

<li class="li"><a href="#nogo" class="option">

安卓开发排行

程序编程推荐

热门文章

 [热门软件]小偶app怎么用 小偶app使…
 [硬盘故障]自己动手就能解决！硬盘…
 [媒体工具]秋意深浓，人生日历4.0新…
 [Windows xp教程]XP提高网速只需要一个协…
 [健康知识]教你如何打造一道超级防…
 [Linux教程]Linux下修改debian whee…

相关文章

为什么一些古老的编程语言一直存在？
android面试题会出现什么内容
什么是html5内联元素？
什么是html5头部元素？
什么是html5相对元素的偏移？
HTML可视结构是什么呢？
什么是HTML文本装饰？
HTML input是什么？
什么是HTML文件？
HTML5命名约定和微格式是什么？
什么是HTML语言结构？

图片文章

Iptool抓包工具数据块匹配教程

 　　数据块匹配”较为复杂，但却非常有用，设置界面如下：　　在这里，用户可以输入文本，也可…

iPhone6/iPhone6 Plus电信版何时可以预定？

 　　iPhone6和iPhone6 Plus在9月30 日拿到入网许可证后，iPhone 6在华上…

MAC OS重装系统找不到启动盘如何修复

　　在给自己的电脑重装系统的时候，有些用户会发现，放入光盘后系统一直提示&…

单行合并字符在Word2007中的实现方法

 　　①启动Word2007，输入文字，然后单击开始选项卡下段落标签里面的中文版式按钮。　　②在下拉列…

万盛电脑知识网 | 设为首页 | 加入收藏 | 关于我们