广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >如何用CSS实现三级导航菜单
  • 274

0
分享到

如何用CSS实现三级导航菜单

2024-04-02 19:04:59 274人浏览 八月长安
摘要

这篇文章主要讲解了“如何用CSS实现三级导航菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用CSS实现三级导航菜单”吧！这是一款CSS导航菜单，三级

这篇文章主要讲解了“如何用CSS实现三级导航菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用CSS实现三级导航菜单”吧！

这是一款CSS导航菜单，三级菜单，资源完整，超实用，希望大家喜欢。

运行效果截图如下：

如何用CSS实现三级导航菜单

在线演示地址如下：

Http://demo.jb51.net/js/2015/css-3l-nav-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><TITLE>CSS导航</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<style type="text/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-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 27px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
}
#nav LI.top {
   DISPLAY: block; FLOAT: left; HEIGHT: 27px;
}
#nav LI A.top_link {
   PADDING-BOTTOM: 0px; LINE-HEIGHT: 27px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: block; FLOAT: left; HEIGHT: 27px; FONT-SIZE: 12px; CURSOR: pointer; FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 0px
}
#nav LI A.top_link SPAN {
   PADDING-BOTTOM: 0px; WIDTH: 80px; DISPLAY: block; text-align:center; FLOAT: left; HEIGHT: 27px; PADDING-TOP: 0px
}
#nav LI A.top_link SPAN.down {
   PADDING-BOTTOM: 0px; WIDTH: 80px; DISPLAY: block; text-align:center; BACKGROUND: url(images/three1.gif) no-repeat right; FLOAT: left; HEIGHT: 27px; PADDING-TOP: 0px
}
#nav LI:hover A.top_link {
   background-color:#548bcf; color:#fff2ee;
}
#nav LI:hover A.top_link SPAN {
   background-color:#548bcf; color:#fff2ee;
}
#nav LI:hover A.top_link SPAN.down {
   background-color:#548bcf; color:#fff2ee;BACKGROUND: url(images/three1a.gif) no-repeat right;
}
#nav LI:hover {
   Z-INDEX: 200; POSITION: relative
}
#nav LI:hover UL.sub {
   Z-INDEX: 270; BORDER-BOTTOM: #DDD 1px solid; BORDER-LEFT: #ddd 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 150px; PADDING-RIGHT: 0px; WHITE-SPACE: nowrap; BACKGROUND: #e1ecf6; HEIGHT: auto; BORDER-TOP: #ddd 1px solid; TOP: 27px; BORDER-RIGHT: #ddd 1px solid; PADDING-TOP: 0px; LEFT: 1px
}
#nav LI:hover UL.sub LI {
   POSITION: relative; WIDTH: 150px; DISPLAY: block; FLOAT: left; HEIGHT: 19px; FONT-WEIGHT: nORMal
}
#nav LI:hover UL.sub LI A {
   BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; LINE-HEIGHT: 19px; TEXT-INDENT: 5px; WIDTH: 150px; DISPLAY: block; HEIGHT: 19px; COLOR: #000; FONT-SIZE: 12px; BORDER-TOP: 0px; BORDER-RIGHT: 0px; TEXT-DECORATION: none
}
#nav LI UL.sub LI A.fly {
   BACKGROUND: url(images/arrow.gif) #e1ecf6 no-repeat left center
}
#nav LI:hover UL.sub LI A:hover {
   BACKGROUND: url(images/subli_bg.gif) #548bcf repeat-x center center; COLOR: #fff;
}
#nav LI:hover UL.sub LI A.fly:hover {
   BACKGROUND: url(images/arrow_over.gif) #548bcf no-repeat left center; COLOR: #fff
}
#nav LI:hover LI:hover UL {
   Z-INDEX: 400; BORDER-BOTTOM: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 150px; PADDING-RIGHT: 0px; WHITE-SPACE: nowrap; BACKGROUND: #e1ecf6; HEIGHT: auto; BORDER-TOP: #ddd 1px solid; TOP: -1px; BORDER-RIGHT: #ddd 1px solid; PADDING-TOP: 0px; LEFT: 144px
}
#nav LI:hover LI:hover LI:hover UL {
   Z-INDEX: 400; BORDER-BOTTOM: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 150px; PADDING-RIGHT: 0px; WHITE-SPACE: nowrap; BACKGROUND: #e1ecf6; HEIGHT: auto; BORDER-TOP: #ddd 1px solid; TOP: -1px; BORDER-RIGHT: #ddd 1px solid; PADDING-TOP: 0px; LEFT: 144px
}
#nav LI:hover LI:hover LI:hover LI:hover UL {
   Z-INDEX: 400; BORDER-BOTTOM: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 150px; PADDING-RIGHT: 0px; WHITE-SPACE: nowrap; BACKGROUND: #e1ecf6; HEIGHT: auto; BORDER-TOP: #ddd 1px solid; TOP: -1px; BORDER-RIGHT: #ddd 1px solid; PADDING-TOP: 0px; LEFT: 144px
}
#nav LI:hover LI:hover LI:hover LI:hover LI:hover UL {
   Z-INDEX: 400; BORDER-BOTTOM: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 150px; PADDING-RIGHT: 0px; WHITE-SPACE: nowrap; BACKGROUND: #e1ecf6; HEIGHT: auto; BORDER-TOP: #ddd 1px solid; TOP: -1px; BORDER-RIGHT: #ddd 1px solid; PADDING-TOP: 0px; LEFT: 144px
}
#nav UL {
   POSITION: absolute; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 0px; PADDING-RIGHT: 0px; HEIGHT: 0px; TOP: -9999px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px; LEFT: -9999px
}
#nav LI:hover UL UL {
   POSITION: absolute; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 0px; PADDING-RIGHT: 0px; HEIGHT: 0px; TOP: -9999px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px; LEFT: -9999px
}
#nav LI:hover LI:hover UL UL {
   POSITION: absolute; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 0px; PADDING-RIGHT: 0px; HEIGHT: 0px; TOP: -9999px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px; LEFT: -9999px
}
#nav LI:hover LI:hover LI:hover UL UL {
   POSITION: absolute; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 0px; PADDING-RIGHT: 0px; HEIGHT: 0px; TOP: -9999px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px; LEFT: -9999px
}
#nav LI:hover LI:hover LI:hover LI:hover UL UL {
   POSITION: absolute; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 0px; PADDING-RIGHT: 0px; HEIGHT: 0px; TOP: -9999px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px; LEFT: -9999px
}
#nav LI:hover LI:hover A.fly {
   BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #fff; BACKGROUND: url(images/arrow_over.gif) #548bcf no-repeat left center; COLOR: #fff; BORDER-RIGHT-COLOR: #fff; BORDER-LEFT-COLOR: #fff;
}
#nav LI:hover LI:hover LI:hover A.fly {
   BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #fff; BACKGROUND: url(images/arrow_over.gif) #548bcf no-repeat left center; COLOR: #fff; BORDER-RIGHT-COLOR: #fff; BORDER-LEFT-COLOR: #fff;
}
#nav LI:hover LI:hover LI:hover LI:hover A.fly {
   BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #fff; BACKGROUND: url(images/arrow_over.gif) #548bcf no-repeat left center; COLOR: #fff; BORDER-RIGHT-COLOR: #fff; BORDER-LEFT-COLOR: #fff;
}
#nav LI:hover LI:hover LI:hover LI:hover LI:hover A.fly {
   BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #fff; BACKGROUND: url(images/arrow_over.gif) #548bcf no-repeat left center; COLOR: #fff; BORDER-RIGHT-COLOR: #fff; BORDER-LEFT-COLOR: #fff;
}
#nav LI:hover LI:hover LI A.fly {
   BORDER-BOTTOM-COLOR: #e1ecf6; BORDER-TOP-COLOR: #e1ecf6; BACKGROUND: url(images/arrow.gif) #e1ecf6 no-repeat left center; COLOR: #000; BORDER-RIGHT-COLOR: #e1ecf6; BORDER-LEFT-COLOR: #e1ecf6
}
#nav LI:hover LI:hover LI:hover LI A.fly {
   BORDER-BOTTOM-COLOR: #e1ecf6; BORDER-TOP-COLOR: #e1ecf6; BACKGROUND: url(images/arrow.gif) #e1ecf6 no-repeat left center; COLOR: #000; BORDER-RIGHT-COLOR: #e1ecf6; BORDER-LEFT-COLOR: #e1ecf6
}
#nav LI:hover LI:hover LI:hover LI:hover LI A.fly {
   BORDER-BOTTOM-COLOR: #e1ecf6; BORDER-TOP-COLOR: #e1ecf6; BACKGROUND: url(images/arrow.gif) #e1ecf6 no-repeat left center; COLOR: #000; BORDER-RIGHT-COLOR: #e1ecf6; BORDER-LEFT-COLOR: #e1ecf6
}
-->
</style>
</HEAD>
<BODY>
<UL id=nav>
<LI class=top><A class=top_link
href="#"><SPAN>首页</SPAN></A></LI>
<LI class=top><A id=products class=top_link
href="#"><SPAN
class=down>关于我们</SPAN></A>
<UL class=sub>
 <LI><A href="#">公司简介</A></LI>
 <LI><A href="#">董事长&总裁</A></LI>
 <LI><A href="#">发展历程</A></LI>
 <LI><A href="#">公司荣誉</A></LI></UL></LI>
<LI class=top><A id=services class=top_link href="#"><SPAN
class=down>产品&服务</SPAN></A>
<UL class=sub>
 <LI><A class=fly href="#">产品1</A>
 <UL>
  <LI><A href="#">配套</A></LI>
  <LI><A href="#">配件</A></LI></UL></LI>
 <LI><A class=fly href="#">产品2</A>
 <UL>
  <LI><A href="#">产品2-1</A></LI>
  <LI><A href="#">产品2-2</A></LI></UL></LI>
 <LI><A class=fly href="#">服务</A>
 <UL>
  <LI><A href="#">服务111</A></LI>
  <LI><A href="#">服务112</A></LI>
  <LI><A href="#">服务113</A></LI>
  <LI><A href="#">服务114</A></LI>
  <LI><A href="#">服务115</A></LI></UL></LI></UL></LI>
<LI class=top><A id=contacts class=top_link
href="#"><SPAN class=down>新闻中心</SPAN></A>
<UL class=sub>
 <LI><A href="#">公告</A></LI>
 <LI><A href="#">行业新闻</A></LI></UL></LI>
<LI class=top><A id=hr class=top_link href="#"><SPAN
class=down>人力资源</SPAN></A>
<UL class=sub>
 <LI><A href="#">人才战略</A></LI>
 <LI><A href="#">社会招聘</A></LI>
 <LI><A href="#">公司福利</A></LI></UL></LI>
<LI class=top><A id=investors class=top_link
href="#"><SPAN class=down>合作伙伴</SPAN></A>
<UL class=sub>
 <LI><A href="#">伙伴1</A></LI>
 <LI><A href="#">伙伴2</A></LI>
 <LI><A href="#">伙伴3</A></LI></UL></LI>
<LI class=top><A id=privacy class=top_link href="#"><SPAN>联系我们</SPAN></A></LI></UL>
</BODY>
</HTML>

感谢各位的阅读，以上就是“如何用CSS实现三级导航菜单”的内容了，经过本文的学习后，相信大家对如何用CSS实现三级导航菜单这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

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

--结束END--

本文标题: 如何用CSS实现三级导航菜单

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

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

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

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

下载Word文档
去做题
猜你喜欢
  • 如何用CSS实现三级导航菜单
    这篇文章主要讲解了“如何用CSS实现三级导航菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用CSS实现三级导航菜单”吧！这是一款CSS导航菜单，三级...
    99+
    2022-10-19
  • js+css实现三级导航菜单
    本文实例为大家分享了js+css实现三级导航菜单的具体代码，供大家参考，具体内容如下 导航菜单hover事件用css实现相对容易，只需要将透明度更改即可，如果想要菜单有一个渐变的效果...
    99+
    2022-11-12
  • css实现导航菜单
    随着互联网的快速发展，网页设计越来越重视用户体验。其中，导航菜单是网站设计中不可或缺的一部分。正确的导航菜单能够方便用户找到所需的信息，提高用户体验和网站访问率。然而，如何实现一个美观、易用的导航菜单呢？这就需要我们熟练掌握CSS技术了。本...
    99+
    2023-05-21
  • 怎么用CSS+XHTML实现二级导航菜单
    这篇文章主要讲解了“怎么用CSS+XHTML实现二级导航菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS+XHTML实现二级导航菜单”吧！这是...
    99+
    2022-10-19
  • 怎么用CSS实现二级下拉导航菜单
    这篇文章主要讲解了“怎么用CSS实现二级下拉导航菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS实现二级下拉导航菜单”吧！这是一款纯CSS菜单...
    99+
    2022-10-19
  • 利用CSS实现多级下拉横向导航菜单
    本篇内容主要讲解“利用CSS实现多级下拉横向导航菜单”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“利用CSS实现多级下拉横向导航菜单”吧!本文实例为大家分享了纯...
    99+
    2022-10-19
  • css如何实现常见的菜单导航
    这篇文章给大家分享的是有关css如何实现常见的菜单导航的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果图：代码如下：<div class="demo2...
    99+
    2022-10-19
  • js左侧三级菜单导航实例代码
    效果演示：  实例代码： 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//...
    99+
    2022-11-15
    js 三级菜单导航
  • CSS怎么实现导航条菜单
    这篇文章主要介绍“CSS怎么实现导航条菜单”，在日常操作中，相信很多人在CSS怎么实现导航条菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS怎么实现导航条菜单”的疑惑...
    99+
    2022-10-19
  • CSS如何实现导航条菜单带小三角形的效果
    小编给大家分享一下CSS如何实现导航条菜单带小三角形的效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！很多网页的导航条都会有小三角形，其实实现这个功能也挺简单。...
    99+
    2023-06-08
  • CSS中如何实现自适应导航菜单
    小编给大家分享一下CSS中如何实现自适应导航菜单，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！html <nav class="nav">...
    99+
    2022-10-19
  • 利用CSS实现响应式导航菜单
    利用CSS实现响应式导航菜单随着移动设备的普及，越来越多的网站需要适应不同尺寸的屏幕来提供更好的用户体验。在移动设备上，由于屏幕空间有限，传统的水平导航菜单可能会在小屏幕上显示不全或导致用户需要不断滑动屏幕来查看完整的菜单项。因此，响应式导...
    99+
    2023-11-21
    响应式 导航 CSS
  • 怎么用css实现橙色导航菜单
    本篇内容介绍了“怎么用css实现橙色导航菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！这是一款橙色风格...
    99+
    2022-10-19
  • CSS中导航条菜单的实现方法
    这篇文章将为大家详细讲解有关CSS中导航条菜单的实现方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　<!DOCTYPEhtmlPUBLIC"-/...
    99+
    2022-10-19
  • CSS导航栏和CSS下拉菜单怎么实现
    这篇文章主要介绍“CSS导航栏和CSS下拉菜单怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS导航栏和CSS下拉菜单怎么实现”文章能帮助大家解决问题。导...
    99+
    2022-10-19
  • 怎么用纯css实现的漂亮导航菜单
    本篇内容介绍了“怎么用纯css实现的漂亮导航菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　今天给大...
    99+
    2022-10-19
  • react如何实现三级菜单
    这篇文章主要讲解了“react如何实现三级菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react如何实现三级菜单”吧！react实现三级菜单的方法：1、创建展开三级父级菜单的方法为“o...
    99+
    2023-07-05
  • 怎么用div+css实现首页导航菜单效果
    本篇内容主要讲解“怎么用div+css实现首页导航菜单效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用div+css实现首页导航菜单效果”吧!先来看看运...
    99+
    2022-10-19
  • HTLM5+css3如何实现简单的导航菜单
    这篇文章主要为大家展示了“HTLM5+css3如何实现简单的导航菜单”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTLM5+css3如何实现简单的导航菜单”这...
    99+
    2022-10-19
  • CSS中怎么实现一个纵向导航菜单
    CSS中怎么实现一个纵向导航菜单，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。CSS纵向导航菜单实现如图所示的CSS纵向导航菜单效果，我们...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作