纯CSS打造的三级联动级联菜单

最新推荐文章于 2022-09-28 21:14:24 发布
最新推荐文章于 2022-09-28 21:14:24 发布
阅读量2.9k 收藏
点赞数
分类专栏： CSS 文章标签： css class ie 手机 xhtml html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/raren/article/details/4239048
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<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">短信回执</a></li>
      <li class="li"><a href="#nogo" class="option">12580综合信息</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">GPRS</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">WLAN业务</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>
     </ul>
     <!--[if IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="li">
     <a href="#nogo" class="option">梦网查询与退订</a>
    </li>
   </ul>
   <!--[if IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="li change">
   <!--[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">GPRS套餐变更</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 score">
   <!--[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>
   </ul>
   <!--[if IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="li server">
   <!--[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>
   </ul>
   <!--[if IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="li edit">
   <!--[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">PUK码查询</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 sms">
   <a href="#nogo" class="option">短信息服务</a>
</li>
</ul>
</div>
</body>
</html>

RaRen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 实现三级联动菜单
ailong3046的博客
08-29 1405
昨天因为项目中想要把二级联动菜单改成三级联动菜单，所以我就单独写了一个tab导航栏，用纯css的方式实现的三级联动。一开始我想着可以用js实现，但是js的hover事件和mouseenter,mouseover,mouseleave,mouseout事件都会有一个问题，就是当鼠标移出区域块儿的时候，我们希望弹出来的二级菜单和三级菜单可能不会像我们希望的显示隐藏。所以，我们可以用css3的...
CSS实现三级菜单
娃娃的博客
11-30 2009
CSS实现三级菜单
纯CSS 级联菜单实现代码
12-09
参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统：Windows 这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。 早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。 废话不多说，咚咚咚，开始制作啦！ 除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。 运行代码框 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/
select实现三级联动
fengchengwu2012的博客
03-17 6651
一、先练习一下select option标签的使用 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0
3 种 不同形式的三级联动
Carolina
09-25 944
本文链接 3 种 不同形式的三级联动 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>城市三级联动</title> <style type="text/css"> *{ padding:0; margin:0} html,body{ height: 100%; width: 100%; position:
Html+Css+jQuery左侧导航菜单三级联动
gly_technology的博客
01-17 1590
左侧导航菜单联动,当鼠标悬浮弹出下一级子菜单.
CSS实现三级菜单导航
今夕莫离-IT
05-19 794
CSS导航 body { font: 12px/1.6em Tahoma,Verdana; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 16.8px; } #nav { Z-INDEX: 500; PADDING-
纯CSS的三级联动级联菜单
06-09
纯CSS的三级联动级联菜单，很实用的纯CSS的三级联动级联菜单
移动端、h5省市区三级联动
最新发布
03-27
在移动端和H5开发中，省市区三级联动是一种常见的功能需求，主要用于地址选择，提供用户一个方便快捷的方式来选择他们的详细地址。本示例提供了一款适用于这两种平台的三级联动组件，下面将详细介绍这个功能及其实现...
仿淘宝商品发布三级联动菜单
11-10
在三级联动菜单中，CSS3可以用来美化下拉菜单的外观，包括颜色、字体、边框、阴影、过渡和动画等，同时通过媒体查询实现响应式布局，确保在不同屏幕尺寸上都能正常显示。 3. **JavaScript/jQuery**：JavaScript是...
非常漂亮的三级联动菜单
03-03
漂亮的三级联动菜单 漂亮的三级联动菜单 漂亮的三级联动菜单
纯css三级联动菜单，兼容各浏览器
07-01
纯css三级联动菜单，兼容各主流浏览器，IE，FF，chrome,opera
Select2实现全国省市区三级联动下拉菜单
01-13
本教程将详细讲解如何利用`Select2`实现全国省市区的三级联动下拉菜单。 首先，我们需要理解`Select2`的核心功能。`Select2`可以将普通的HTML选择框转化为功能强大的输入控件，支持搜索、多选、远程数据加载等多种...
通过HTML和CSS实现一个三级菜单
weixin_53428952的博客
09-28 1881
实现二级菜单我有两个思路,一个是将二级菜单display:none,当hover一级菜单的时候,将二级菜单的display:block;当hover一级菜单的时候,二级菜单 height:auto;三级菜单的思路则和设计二级菜单的思路一样,顺着下来就好了,如果要调整一下显示的位置的话,可以使用position调整位置,让菜单看起来更加的美观.本篇文章发布的代码是关于使用html和css实现一个三级菜单列表,在学习的过程中,做一下自己想做的东西,争取以后可以自己做出一个自己的网站来.
纯CSS实现3级导航菜单效果。
CodingNoob
12-15 695
<div class="main"> <ul id="subMenu"> <li class="item01"> <span class="arrow-right"></span> <a href="#">导航1</a>
纯css制作三级菜单
汉堡请不要欺负面条
03-07 1912
一.注意点： 1.选择器的使用 ①element1>element2：如果元素element2不是父元素element1的直接子元素，则不会被选择。 ②element1+element2： 选择器用于选取第一个指定的元素element1之后（不是内部）紧跟的元素element2，同级元素 ③:hover :选择器用于选择鼠标指针浮动在上面的元素 ④:after: 选择器在被选元素的内
css案例1——一级菜单、二级菜单、三级菜单、四级菜单
努力、拼搏、奋进
05-17 8452
纯css实现二级菜单、三级菜单、四级菜单，代码易理解，上手操作快。
使用CSS3实现三级菜单
weixin_42409913的博客
11-02 276
一：效果 二：代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
纯css制作三级下拉菜单
热门推荐
web_xiaolei的博客
10-12 1万+
css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是本人用纯css制作的三级下拉菜单效果：思路很简单，三级菜单直接用三层嵌套的ul布局： 电器
基于AJAX实现三级级联下拉菜单
05-09
三级级联下拉菜单可以通过AJAX技术实现。具体实现步骤如下： 1. 在HTML页面中创建三个下拉菜单，分别表示三级菜单，每个下拉菜单的选项为空。 2. 给第一个下拉菜单绑定change事件，在该事件处理函数中使用AJAX发送请求，请求后台数据，获取第二级菜单的选项数据。 3. 在AJAX的回调函数中，将获取到的第二级菜单选项数据添加到第二个下拉菜单中。 4. 给第二个下拉菜单绑定change事件，在该事件处理函数中使用AJAX发送请求，请求后台数据，获取第三级菜单的选项数据。 5. 在AJAX的回调函数中，将获取到的第三级菜单选项数据添加到第三个下拉菜单中。 6. 用户选择完第三级菜单选项后，可以根据选项的值执行相应的操作。 示例代码如下： HTML代码： ``` <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="area"> <option value="">请选择区县</option> </select> ``` JS代码： ``` // 获取省份数据 $.ajax({ url: 'getProvince.php', success: function(data) { // 将省份数据添加到第一个下拉菜单中 $('#province').html(data); } }); // 绑定省份下拉菜单change事件 $('#province').on('change', function() { var provinceId = $(this).val(); // 获取城市数据 $.ajax({ url: 'getCity.php', data: {provinceId: provinceId}, success: function(data) { // 将城市数据添加到第二个下拉菜单中 $('#city').html(data); } }); }); // 绑定城市下拉菜单change事件 $('#city').on('change', function() { var cityId = $(this).val(); // 获取区县数据 $.ajax({ url: 'getArea.php', data: {cityId: cityId}, success: function(data) { // 将区县数据添加到第三个下拉菜单中 $('#area').html(data); } }); }); // 绑定区县下拉菜单change事件 $('#area').on('change', function() { var areaId = $(this).val(); // 根据选项值执行相应操作 }); ``` 以上示例代码需要在后台编写getProvince.php、getCity.php、getArea.php三个文件，分别返回对应的下拉菜单选项数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值