CSS 多级纵向下拉菜单

最新推荐文章于 2024-04-15 19:53:44 发布
最新推荐文章于 2024-04-15 19:53:44 发布
阅读量2.5k 收藏
点赞数
分类专栏： web制作 文章标签： css ie stylesheet microsoft xhtml html

下面代码直接COPY 就可以用了

 

//skin/style3.css

/

@charset "utf-8";
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,form,th,td{margin:0;padding:0;font-size:12px;}
body{margin:10px;font:12px/2 Verdana, Arial, Helvetica, Simsun, "Microsoft YaHei";}
table{border-collapse:collapse;border-spacing:0;}
li{list-style:none;}
a{text-decoration:none;cursor:pointer;}
.copyright{margin-top:50px;font-size:13px;text-align:center;}
#dymenu{width:100px;line-height:25px;}
#dymenu .root li{position:relative;border:1px solid #FFF;border-width:1px 1px 0 0;background:#EEE;}
#dymenu .root li li{border-width:1px 0 0 1px;}
#dymenu .root a{display:block;zoom:1;padding:0 10px;background:#EEE;color:#000;vertical-align:top;}
#dymenu .root h4{padding:0 10px;*padding:0;background:#EEE;*background:none;color:#000;font-weight:normal;cursor:pointer;}
#dymenu .root a:hover{background:#DDD;color:#333;}
#dymenu .root li:hover>h4{background:#DDD;color:#333;}
#dymenu .root ul,#dymenu a:hover a ul,#dymenu a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a ul{display:none;margin:-1px 0 0 0;_margin-top:0;background:#EEE;}
#dymenu a:hover ul,#dymenu a:hover a:hover ul,#dymenu a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul{display:block;position:absolute;left:99px;top:0;width:100px;}
#dymenu .root li:hover>ul{display:block;position:absolute;left:99px;top:0;width:100px;margin-top:-1px;background:#EEE;}

//html 下拉菜单主页

/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>纯CSS打造纵向无限级下拉菜单 - Powered by 飘零雾雨</title>
<meta name="description" content="这是一个纯css打造的纵向无限级下拉菜单" />
<meta name="keywords" content="纯css, 下拉菜单, 无限级菜单" />
<meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
<link rel="stylesheet" type="text/css" media="all" href="skin/style3.css" />
</head>
<body>
<h1>纯CSS无限级下拉菜单:</h1>
<p>IE需要在样式文件预设好显示级数，其它浏览器则真正可以做到无限级</p>
<p>立即试试下面的无限级菜单：</p>
<div id="dymenu">
<ul class="root">
<li>
 <!--[if IE]><a href="?"><table><tr><td><![endif]-->
 <h4>飘雨社区 &#187;</h4>
 <ul>
  <li><a href="http://www.doyoe.com/">网站重构</a></li>
  <li>
   <!--[if IE]><a href="?"><table><tr><td><![endif]-->
   <h4>语义化 &#187;</h4>
   <ul>
    <li><a href="?">三级菜单</a></li>
    <li>
     <!--[if IE]><a href="?"><table><tr><td><![endif]-->
     <h4>三级菜单 &#187;</h4>
     <ul>
      <li><a href="?">四级菜单</a></li>
      <li>
       <!--[if IE]><a href="?"><table><tr><td><![endif]-->
       <h4>四级菜单 &#187;</h4>
       <ul>
        <li><a href="?">五级菜单</a></li>
        <li>
         <!--[if IE]><a href="?"><table><tr><td><![endif]-->
         <h4>五级菜单 &#187;</h4>
         <ul>
          <li><a href="?">六级菜单</a></li>
          <li>
           <!--[if IE]><a href="?"><table><tr><td><![endif]-->
           <h4>六级菜单 &#187;</h4>
           <ul>
            <li><a href="?">七级菜单</a></li>
            <li>
             <!--[if IE]><a href="?"><table><tr><td><![endif]-->
             <h4>七级菜单 &#187;</h4>
             <ul>
              <li><a href="?">八级菜单</a></li>
              <li>
               <!--[if IE]><a href="?"><table><tr><td><![endif]-->
               <h4>八级菜单 &#187;</h4>
               <ul>
                <li><a href="?">九级菜单</a></li>
                <li>
                 <!--[if IE]><a href="?"><table><tr><td><![endif]-->
                 <h4>九级菜单 &#187;</h4>
                 <ul>
                  <li><a href="?">十级菜单</a></li>
                  <li>
                   <!--[if IE]><a href="?"><table><tr><td><![endif]-->
                   <h4>十级菜单 &#187;</h4>
                   <ul>
                    <li><a href="?">十一级菜单</a></li>
                    <li><a href="?">十一级菜单</a></li>
                    <li><a href="?">十一级菜单</a></li>
                    <li><a href="?">十一级菜单</a></li>
                   </ul>
                   <!--[if IE]></td></tr></table></a><![endif]-->
                  </li>
                  <li><a href="?">十级菜单</a></li>
                  <li><a href="?">十级菜单</a></li>
                 </ul>
                 <!--[if IE]></td></tr></table></a><![endif]-->
                </li>
                <li><a href="?">九级菜单</a></li>
                <li><a href="?">九级菜单</a></li>
               </ul>
               <!--[if IE]></td></tr></table></a><![endif]-->
              </li>
              <li><a href="?">八级菜单</a></li>
              <li><a href="?">八级菜单</a></li>
             </ul>
             <!--[if IE]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="?">七级菜单</a></li>
            <li><a href="?">七级菜单</a></li>
           </ul>
           <!--[if IE]></td></tr></table></a><![endif]-->
          </li>
          <li><a href="?">六级菜单</a></li>
          <li><a href="?">六级菜单</a></li>
         </ul>
         <!--[if IE]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="?">五级菜单</a></li>
        <li><a href="?">五级菜单</a></li>
       </ul>
       <!--[if IE]></td></tr></table></a><![endif]-->
      </li>
      <li><a href="?">四级菜单</a></li>
      <li><a href="?">四级菜单</a></li>
     </ul>
     <!--[if IE]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="?">三级菜单</a></li>
    <li><a href="?">三级菜单</a></li>
   </ul>
   <!--[if IE]></td></tr></table></a><![endif]-->
  </li>
  <li><a href="http://www.doyoe.com/">搜索引擎优化</a></li>
  <li><a href="http://www.doyoe.com/">用户体验</a></li>
 </ul>
 <!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li>
 <!--[if IE]><a href="?"><table><tr><td><![endif]-->
 <h4>css探索之旅&#187;</h4>
 <ul>
  <li><a href="http://blog.doyoe.com/">CSS</a></li>
  <li><a href="http://blog.doyoe.com/">XHTML</a></li>
  <li><a href="http://blog.doyoe.com/">JavaScript</a></li>
  <li><a href="http://blog.doyoe.com/">SEO</a></li>
  <li><a href="http://blog.doyoe.com/">UE</a></li>
 </ul>
 <!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li>
 <!--[if IE]><a href="?"><table><tr><td><![endif]-->
 <h4>一级菜单 &#187;</h4>
 <ul>
  <li>
   <!--[if IE]><a href="?"><table><tr><td><![endif]-->
   <h4>二级菜单 &#187;</h4>
   <ul>
    <li><a href="?">三级菜单</a></li>
    <li><a href="?">三级菜单</a></li>
    <li><a href="?">三级菜单</a></li>
    <li><a href="?">三级菜单</a></li>
   </ul>
   <!--[if IE]></td></tr></table></a><![endif]-->
  </li>
  <li><a href="?">二级菜单</a></li>
  <li><a href="?">二级菜单</a></li>
 </ul>
 <!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li>
 <!--[if IE]><a href="?"><table><tr><td><![endif]-->
 <h4>一级菜单 &#187;</h4>
 <ul>
  <li><a href="?">二级菜单</a></li>
  <li><a href="?">二级菜单</a></li>
  <li><a href="?">二级菜单</a></li>
  <li><a href="?">二级菜单</a></li>
 </ul>
 <!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<p class="copyright">&copy; Copyright <a href="http://blog.doyoe.com/" title="css探索之旅 - 飘零雾雨的庄园">doyoe.com</a></p>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3500471-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

曾今的梦想
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css纵向导航菜单及二级弹出菜单
12-23
纵向导航菜单及二级弹出菜单的CSS代码。直接看html上面的style标签。
div+css 纵向导航菜单及二级菜单弹出
janefir的专栏
11-26 6655
1） 纵向导航菜单 body { font-family: Verdana;font-size: 12px; line-height: 1.5; } a { color: #000;text-decoration: none; } a:hover { color: #F00; } #menu { width: 100px; border:1px solid #CCC; } #menu
实战案例:横向和纵向的三级下拉菜单需要掌握hover
箜的博客
12-12 784
三级下拉 类似二级下拉,在二级下拉的基础上配合定位的属性再添加一层. 一. 横向三级 二.纵向三级 文章最后后附三级下拉菜单的html代码. 1.两个ul绝对定位做横向(推荐) 此时的二级菜单有绝对定位,所以三级菜单会以二级菜单为参照物,如果不设置宽度三级菜单会出现折行的现象,所以需要给三级菜单一个宽度303px实现横向,或101px实现二级横向,三级竖向. *{margin: 0; padding: 0;} a{ text-decoration: none; } ul{ list-st
Axure 基础详解一：下拉菜单的制作
太空背包客的博客
10-17 1469
Axure 基础详解，下拉菜单的制作，对日常组件的用法、原理以及制作方法的详解。
CSS实现的几款不错的菜单栏
逐梦小涛
02-06 1103
前言      自从做了智慧城市这个项目之后，我一个做后端的开发者，瞬间转为前端开发，不过我还是很喜欢前端的。前端那些事，其实蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！ 一、滑动菜单 1、代码： 1 D
JQuery纵向下拉菜单实现心得
从手指到键盘，谱出生命的轨迹~~~
03-23 2191
jquery库给我们带来了许多便利，不愧是轻量级的DOM框架，在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍，期待各位小伙伴的指导。使用jquery实现一个简单的横纵向菜单，小编相信其他小伙伴都有很多的实现方法，小编今天自己使用JQuery写了一个横纵向菜单，用博文跟小伙伴分享一下小编实现横纵向菜单的实现心得。         当我们浏览网页和使
css新手入门教程------纵向下拉及多级弹出式菜单
mounting的专栏
05-06 1371
注意事项：             了实现导航中的子导航与主导航在实现鼠标交互的同时，保持其相对位置一致，我们使用了对ul li{}使用了position:relative;使其定位方式转为相对定位。而对li ul{}即子导航采用了position:absolute;相对于导航的绝对定位方式，了其鼠标交互后的位置一致。            纵向导航菜单 我们先看一下代码结构：
css怎么把横向菜单变纵向_实现简洁漂亮二级菜单的2个实例
weixin_30540871的博客
12-28 861
在程序开发中，经常用到二级菜单，这里给大家介绍2种：①实现纵向下拉二级菜单实例，②实现横向下拉二级菜单实例。1、实现纵向下拉二级菜单实例纵向下拉二级菜单如下图所示：实现纵向下拉二级菜单实例效果图具体代码实现如下(主要代码有参考注释)：二级纵向下拉菜单 *{ margin:0; padding:0;} ul, li { list-style:none;} a { text-decoration:no...
html制作三级纵向菜单,HTML5实例之CSS3制作的三级下拉菜单（代码）
weixin_42525385的博客
05-30 779
HTML5实例之CSS3制作的三级下拉菜单(代码)三级下拉菜单p{margin:30px 180px;}ul{list-style:none;padding:0px;}ul li{float:left;position:relative;}ul li a{text-decoration:none;background:#a40000;display:block;line-height:40px;t...
html左侧导航栏点击下拉菜单,HTML+CSS实现下拉菜单
weixin_42112894的博客
05-30 1906
HTML+CSS实现简单下拉菜单HTML+CSS实现简单的下拉列表1.下拉列表实例代码如下：*{margin:0;padding:0;text-decoration:none;list-style:none;}body{text-align:center;}.header{display:inline-block;position:relative;background-color:#4CAF50...
纵向下拉及多级弹出式菜单
gundumw100的专栏
04-10 505
下拉纵向及多级弹出式菜单www.aa25.cn <!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) {
纯CSS多级菜单(横向)
07-14
纯CSS多级菜单(横向)，HTML代码和CSS代码。使用时直接拷贝到网页即可
CSS网页布局入门教程14：纵向下拉及多级弹出式菜单
10-30
CSS网页布局入门教程14：纵向下拉及多级弹出式菜单
可配置的javascript下拉菜单
02-10
Multi-level effect menu- 这是一个高度可配置的 javascript/css下拉菜单, 可以让你轻松生成多级层联的横向或纵向下拉菜单.
jquery实现点击向下展开菜单项(伸缩导航)效果
12-07
这里演示基于jquery打造的向下展开的多级导航条效果，纵向垂直排列，风格非常的简洁，鼠标点击时候展开菜单的二级项，再次点击的时候又向上合拢，平时只显示一级菜单，二级菜单是隐藏不显示的，代码简洁，包括了完整...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
22.jquery平滑效果黑色横向与纵向多级下拉菜单插件(支持5级) 23.jquery实现的动感菜单导航条源码 24.jquery实用滚动下拉菜单代码 25.jquery鼠标移动出现下拉菜单及提示特效代码 26.jquery外国滚动型多级...
div+css十天学会
12-14
第八天　下拉及多级弹出菜单 第九天　CSS表单设计 第十天　div+css网页标准布局实例教程（一） 第十天　div+css网页标准布局实例教程（二） 第十天　div+css网页标准布局实例教程（三） 来自：http://www.aa25.cn/
css复合选择器
最新发布
2302_79590880的博客
04-15 421
css复合选择器整理
【CSS】margin（外边距）属性以及如何消除塌陷现象
2301_79982543的博客
04-15 470
在实际开发中，人们已经很少使用表格等html标签，我们通常使用div标签加上padding属性与margin属性进行网页布局。
layui多级下拉菜单
09-07
Layui是一种简洁、易用的前端开发框架，它提供了丰富的UI组件来满足各种需求。其中，多级下拉菜单是Layui提供的一种常见的导航菜单样式。 Layui的多级下拉菜单基于HTML和CSS构建，通过简洁的HTML结构和灵活的CSS样式，实现了多级菜单的展示和交互效果。在HTML代码中，我们可以使用ul和li标签来构建菜单的层级结构，而CSS样式则负责控制菜单的展示效果、动画效果和交互行为。 使用Layui的多级下拉菜单，我们可以实现各种复杂的导航菜单效果。例如，可以设置菜单项的图标、文字、提示信息等属性，可以定义鼠标悬停、点击等事件的响应行为，还可以通过CSS样式控制菜单的显示方式、字体样式、背景颜色等。 在代码中，我们可以使用Layui的菜单组件来创建多级下拉菜单，并通过设置参数来定制菜单的属性和行为。例如，可以指定菜单的布局方式、默认展开的层级、鼠标移入移出的效果、点击菜单项的回调函数等。 总之，Layui的多级下拉菜单是一种方便、灵活的前端组件，可以轻松地实现各种导航菜单效果。无论是简单的网页导航还是复杂的应用系统菜单，都可以通过Layui的多级下拉菜单来满足需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值