广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >怎么用CSS实现4级下拉菜单
  • 780

0
分享到

怎么用CSS实现4级下拉菜单

2024-04-02 19:04:59 780人浏览 独家记忆
摘要

这篇文章主要介绍“怎么用CSS实现4级下拉菜单”，在日常操作中，相信很多人在怎么用CSS实现4级下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS实现4级下拉

这篇文章主要介绍“怎么用CSS实现4级下拉菜单”，在日常操作中，相信很多人在怎么用CSS实现4级下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS实现4级下拉菜单”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

这是一款基于CSS实现的多级菜单，一共可下拉出4级，在编写此类的CSS菜单时要注意，一级的li，a的hover时，设置二级菜单可见，一级的li，a的hover时，设置二级,三级菜单隐藏，一级和二级的li，a的hover时，设置三级和四级级菜单隐藏，一级二级菜单hover时，设定3级菜单可见，一级二级三级hover时，设置四级菜单可见，代码里已加注了丰富的注释，菜单风格如果不适合你口味的话，可自己美化一下。

运行效果截图如下：

怎么用CSS实现4级下拉菜单

在线演示地址如下：

Http://demo.jb51.net/js/2015/css-4l-fade-out-menu-style-codes/

具体代码如下：

代码如下:

<!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" />
<title>CSS 实现4级的下拉菜单</title>
</head>
<style>
<!--
* {margin:0px;padding:0px;}
body {font-size:12px;font-family:Arial;color:#000;}
a {font-size:12px;font-family:Arial;color:#000;text-decoration:none;}
.menu {position:relative;width:500px;background-color:#360;}
.menu ul {list-style-type:none;}
.menu li { float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:20px;border:1px solid #000;}
.menu ul ul ul{ visibility:hidden; position:absolute; left:122px;top:0px; border:solid 1px #999999;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;}
.menu a:hover{background:#690;color:#000;}
.menu ul ul li {clear:both;text-align:left;}
.menu ul ul li a{display:block;width:100px;height:15px;}
.menu ul ul li a:hover{background:#690;}
.menu ul ul ul li a{clear:both;text-align:left;}
.menu UL LI:hover UL {VISIBILITY: visible}
.menu UL A:hover UL {
VISIBILITY: visible

}
.menu UL :hover UL UL {
 VISIBILITY: hidden
 
}
.menu UL :hover UL :hover UL UL {
 VISIBILITY: hidden
 
}
.menu UL :hover UL :hover UL {
 VISIBILITY: visible
 
}
.menu UL :hover UL :hover UL :hover UL {
 VISIBILITY: visible
 
}
.menu ul ul ul a{ background:#00CCFF;}
.menu ul ul ul a:hover{ background:#0066FF;}
.menu ul ul ul ul a{ background:#390;}
.menu ul ul ul ul a:hover{ background:#690;}
-->
</style>
<body>
<div class="menu">
<ul>
<li><a href="#">公司首页
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级菜单_01</a></li>
<li><a href="#">二级菜单_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--第2个菜单开始-->
<li><a href="#">公司简介<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级菜单_01</a></li>
<li><a href="#">二级菜单_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--结束-->
<!--三级开始-->
<li><a href="#">产品导航
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级菜单_01</a>
<!--三级子菜单-->
<li><a href="#">二级菜单_02
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="#">三级菜单_01</a></li>
 <li><a href="#">三级菜单_02</a></li>
 <li><a href="#">三级菜单_03</a></li>
 <li><a href="#">三级菜单_04
 <!--四级菜单开始-->
     <!--[if IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
     <li><a href="#">四级菜单_01</a></li>
     <li><a href="#">四级菜单_02</a></li>
     <li><a href="#">四级菜单_03</a></li>
     <li><a href="#">四级菜单_04</a></li>
     </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <!--四级子菜单结束-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--三级结束-->
<!--三级子菜单-->
<li><a href="#">二级菜单_03
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="#">三级菜单_01</a></li>
 <li><a href="#">三级菜单_02</a></li>
 <li><a href="#">三级菜单_03</a></li>
 <li><a href="#">三级菜单_04
 <!--四级菜单开始-->
     <!--[if IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
     <li><a href="#">四级菜单_01</a></li>
     <li><a href="#">四级菜单_02</a></li>
     <li><a href="#">四级菜单_03</a></li>
     <li><a href="#">四级菜单_04</a></li>
     </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <!--四级子菜单结束-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--三级结束-->
</ul>
</body>
</html>

到此，关于“怎么用CSS实现4级下拉菜单”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 怎么用CSS实现4级下拉菜单

本文链接: https://www.lsjlt.com/news/76823.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 怎么用CSS实现4级下拉菜单
    这篇文章主要介绍“怎么用CSS实现4级下拉菜单”，在日常操作中，相信很多人在怎么用CSS实现4级下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS实现4级下拉...
    99+
    2022-10-19
  • 怎么用CSS实现三级下拉菜单效果
    这篇文章主要介绍“怎么用CSS实现三级下拉菜单效果”，在日常操作中，相信很多人在怎么用CSS实现三级下拉菜单效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS实现...
    99+
    2022-10-19
  • 怎么用CSS实现二级下拉导航菜单
    这篇文章主要讲解了“怎么用CSS实现二级下拉导航菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS实现二级下拉导航菜单”吧！这是一款纯CSS菜单...
    99+
    2022-10-19
  • css怎么实现下拉菜单
    这篇文章主要介绍css怎么实现下拉菜单，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！css的全称是什么css的全称是Cascading Style Sheets（层叠样式表），它是一种用来表现HTML或XML等文件样...
    99+
    2023-06-14
  • css中怎么实现一个三级下拉菜单
    今天就跟大家聊聊有关css中怎么实现一个三级下拉菜单，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。<!DOCTYPE html>...
    99+
    2022-10-19
  • 纯CSS怎么实现下拉菜单
    这篇文章将为大家详细讲解有关纯CSS怎么实现下拉菜单，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体如下：将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。设置下拉菜单的高度添加过渡效果，高度为auto...
    99+
    2023-06-08
  • css怎样实现下拉菜单
    这篇文章将为大家详细讲解有关css怎样实现下拉菜单，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　<!DOCTYPEhtml> 　　<html&...
    99+
    2022-10-19
  • 怎么用css实现下拉菜单功能
    这篇文章主要讲解了“怎么用css实现下拉菜单功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用css实现下拉菜单功能”吧！ ...
    99+
    2022-10-19
  • 用CSS实现水平下拉菜单
    这篇文章主要介绍“用CSS实现水平下拉菜单”，在日常操作中，相信很多人在用CSS实现水平下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”用CSS实现水平下拉菜单”的疑惑...
    99+
    2022-10-19
  • 纯CSS怎么实现大型下拉菜单
    小编给大家分享一下纯CSS怎么实现大型下拉菜单，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！HTML结构该大型菜单的HTML结构如下：<nav>&nb...
    99+
    2023-06-08
  • css如何实现下拉菜单
    这篇文章主要为大家展示了“css如何实现下拉菜单”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css如何实现下拉菜单”这篇文章吧。 　　HTML代码： 　　...
    99+
    2022-10-19
  • CSS导航栏和CSS下拉菜单怎么实现
    这篇文章主要介绍“CSS导航栏和CSS下拉菜单怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS导航栏和CSS下拉菜单怎么实现”文章能帮助大家解决问题。导...
    99+
    2022-10-19
  • 利用CSS实现多级下拉横向导航菜单
    本篇内容主要讲解“利用CSS实现多级下拉横向导航菜单”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“利用CSS实现多级下拉横向导航菜单”吧!本文实例为大家分享了纯...
    99+
    2022-10-19
  • CSS怎么实现灰色下拉菜单效果
    本篇内容介绍了“CSS怎么实现灰色下拉菜单效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！这是一款基于C...
    99+
    2022-10-19
  • HTML+CSS如何实现下拉菜单
    小编给大家分享一下HTML+CSS如何实现下拉菜单，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！1.下拉列表实例代码如下：<!doctype html><html><head>...
    99+
    2023-06-08
  • 怎么使用HTML+CSS+JavaScript实现下拉菜单效果
    今天小编给大家分享一下怎么使用HTML+CSS+JavaScript实现下拉菜单效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一...
    99+
    2023-07-02
  • android 之Spinner下拉菜单实现级联
    效果图如下： 默认第一次加载 选择原始队列： 级联效果图： 关键代码给下拉列表选中事件监听绑定Id ： 代码如下:int pos = firsthand_dlbh_pin...
    99+
    2022-06-06
    菜单 spinner 级联 Android
  • HTML+CSS+JavaScript实现下拉菜单效果
    本文实例为大家分享了HTML+CSS+JavaScript实现下拉菜单效果的具体代码，供大家参考，具体内容如下 实现思路： HTML 方面，导航栏的每个 <li> 元素里...
    99+
    2022-11-13
  • jquery怎么实现简单的下拉菜单
    要实现简单的下拉菜单，可以使用jQuery的`slideDown()`和`slideUp()`方法来实现下拉和收起的效果。首先，在H...
    99+
    2023-08-18
    jquery
  • 如何使用html+css制作三级下拉菜单
    这篇文章给大家分享的是有关如何使用html+css制作三级下拉菜单的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下1.html代码   &...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作