纯css菜单栏的下拉

最新推荐文章于 2025-07-24 10:30:08 发布
最新推荐文章于 2025-07-24 10:30:08 发布
阅读量626 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： web 菜单下拉
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/V__KING__/article/details/41114811 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS下拉菜单，兼容IE和FF</title>
<meta name="keywords" content="jquery,jquery吧,jquery插件,jquery 特效,jquery 教程,jquery 效果,jquery ui,前端开发,web前端,web前端开发,,前端资源,html+CSS,JavaScript,html5,css3,css,css学习,css教程,浏览器兼容,php" />
<meta name="description" content="Write Less, Do More,重注前端开发,web前端开发" />
<link rel="shortcut icon" href="http://www.jqueryba.com/favicon.ico" type="image/x-icon"/>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.jqueryba.com/rss/" />
</head>
<body>
<style type="text/css">
body {color:#fff;}
#wrapper {color:#000;}
.red {color:#c00;}
#info {margin-top:20px;}
#info h1 {font-size:3em; text-align:center; font-family: georgia, "times new roman", serif;}
#head {height:145px; border:0;}
#positioner {clear:both; position:relative; left:1px; z-index:100;}
#ads {position:relative; z-index:10;}
.menu {display:none;}
#noniemenu {position:absolute;}
#noniemenu .holder ul {padding:0; margin:0;}
#noniemenu .holder ul li {list-style-type: none;}
#noniemenu .holder li {}
#noniemenu .holder li ul {display: none;}
#noniemenu .holder li:hover > ul#a3 {display:block; position:absolute; left:105px; margin-top:-20px; border:1px solid #000;}
#noniemenu .holder .bold {font-weight:bold;}
#noniemenu .holder {
  color:#fff;
  width:104px;
  height:18px;
  display:block;
  overflow:hidden;
  float:left;
  border:1px solid #000;
  margin-right:1px;
  font-size:10px;
  }
#noniemenu .holder:hover {
  height:auto;
  }
#noniemenu a.outer, #noniemenu a.outer:visited {
   color:#fff;
   width:104px;
   line-height:18px;
   display:block;
   background:#e09222;
   text-align:center;
   text-decoration:none;
   font-family: verdana, arial, sans-serif;
   }
#noniemenu a.outer:hover {
  background:#697210;
  overflow:visible;
  }
#noniemenu div.open {display:none;}
#noniemenu a.inner, #noniemenu a.inner:visited {
  display:block;
  width:104px;
  height:18px;
  line-height:18px;
  border-bottom:1px solid #000;
  text-decoration:none;
  color:#000;
  background:#eee;
  text-align:center;
  }
#noniemenu a.second {font-weight:bold;}
#noniemenu a.inner:hover {
  background:#add;
  }
</style>
<!--[if lte IE 6]>
<style type="text/css">
body {margin-top:-8px;}
#head {height:147px;}
#noniemenu {display:none;}
.menu {display:block; position:absolute;}
.menu a.outer, .menu a.outer:visited {
   color:#fff;
   width:104px;
   height:18px;
   display:block;
   background:#e09222;
   border:1px solid #000;
   margin-right:1px;
   text-align:center;
   float:left;
   text-decoration:none;
   font-family: verdana, arial, sans-serif;
   font-size:10px;
   line-height:18px;
   overflow:hidden;
   }
.menu a.outer:hover {
  background:#697210;
  overflow:visible;
  }
.menu a.outer:hover table.first {
  display:block;
  background:#eee;
  border-collapse:collapse;
  }
.menu a.inner, .menu a.inner:visited {
  display:block;
  width:102px;
  height:18px;
  border-bottom:1px solid #000;
  text-decoration:none;
  color:#000;
  font-family: verdana, arial, sans-serif;
  font-size:10px;
  text-align:center;
  }
.menu a.inner:hover {
  background:#add;
  }
.menu a.outer table.first a.second {
  height:18px;
  line-height:18px;
  overflow:hidden;
  font-weight:bold;
  }
.menu a.outer table.first a.second:hover {
  position:relative;
  overflow:visible;
  }
.menu a.outer table.first a.second:hover table {
  position:absolute;
  top:-2px;
  left:102px;
  border-collapse:collapse;
  background:#eee;
  border:1px solid #000;
  font-weight:normal
}
</style>
<![endif]-->
<!--[if lte IE 6]>
<style>
#ads {display:none;}
#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="head">
<div id="positioner">
<div class="menu">
<a class="outer" href="">DEMOS
<table class="first"><tr><td>
<a class="inner" href="" title="The zero dollar ads page">zero dollars</a>
<a class="inner" href="" title="Wrapping text around images">wrapping text</a>
<a class="inner" href="" title="Styling forms">styled form</a>
<a class="inner" href="" title="Removing active/focus borders">active focus</a>
<a class="inner second" href="" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<a class="inner" href="" title="Styling forms">styled form</a>
<a class="inner" href="" title="Removing active/focus borders">active focus</a>
<a class="inner" href="" title="Hover/click with no active/focus borders">hover/click</a>
</td></tr></table>
</a>
<a class="inner" href="" title="Multi-position drop shadow">shadow boxing</a>
<a class="inner" href="" title="Image Map for detailed information">image map</a>
<a class="inner" href="" title="fun with background images">fun backgrounds</a>
<a class="inner" href="" title="fade-out scrolling">fade scrolling</a>
<a class="inner" href="" title="em size images compared">em sized images</a>
</td></tr></table>
</a>
<a class="outer" href="">MENUS
<table class="first"><tr><td>
<a class="inner" href="" title="a coded list of spies">spies menu</a>
<a class="inner" href="" title="a horizontal vertical menu">vertical menu</a>
<a class="inner" href="" title="an enlarging unordered list">enlarging list</a>
<a class="inner" href="" title="an unordered list with link images">link images</a>
<a class="inner" href="" title="non-rectangular links">non-rectangular</a>
<a class="inner" href="" title="jigsaw links">jigsaw links</a>
<a class="inner" href="" title="circular links">circular links</a>
</td></tr></table>
</a>
<a class="outer" href="">LAYOUTS
<table class="first"><tr><td>
<a class="inner" href="" title="Cross browser fixed layout">Fixed 1</a>
<a class="inner" href="" title="Cross browser fixed layout">Fixed 2</a>
<a class="inner" href="" title="Cross browser fixed layout">Fixed 3</a>
<a class="inner" href="" title="Cross browser fixed layout">Fixed 4</a>
<a class="inner" href="" title="A simple minimum width layout">minimum width</a>
</td></tr></table>
</a>
<a class="outer" href="">BOXES
<table class="first"><tr><td>
<a class="inner" href="" title="Left scroll bars">left scroll</a>
<a class="inner" href="" title="IE6 3px float fix">IE6 3px fix</a>
<a class="inner" href="" title="Snazzy borders">snazzy borders</a>
<a class="inner" href="" title="Krazy Korners">krazy korners</a>
<a class="inner" href="" title="Percentage PLUS pixels">% PLUS pixels</a>
<a class="inner" href="" title="min-width for IE">IE min-width</a>
<a class="inner" href="" title="min-height for IE">IE min-height</a>
</td></tr></table>
</a>
<a class="outer" href="../mozilla/index.html">MOZILLA
<table class="first"><tr><td>
<a class="inner" href="" title="A drop down menu">drop down menu</a>
<a class="inner" href="" title="A cascading menu">cascading menu</a>
<a class="inner" href="" title="Using content:">content:</a>
<a class="inner" href="" title=":hover applied to a div">mozzie box</a>
<a class="inner" href="" title="I can build a rainbow">rainbow box</a>
<a class="inner" href="" title="Snooker cue">snooker cue</a>
<a class="inner" href="" title="Target Practise">target practise</a>
<a class="inner" href="" title="Two tone headings">two tone headings</a>
<a class="inner" href="" title="Shadow text">shadow text</a>
</td></tr></table>
</a>
<a class="outer" href="">EXPLORER
<table class="first"><tr><td>
<a class="inner" href="" title="Example one">example one</a>
<a class="inner" href="" title="Weft fonts">weft fonts</a>
<a class="inner" href="" title="Vertical align">vertical align</a>
</td></tr></table>
</a>
<a class="outer" href="">OPACITY
<table class="first"><tr><td>
<a class="inner" href="" title="colour wheel">opaque colours</a>
<a class="inner" href="" title="a menu using opacity">opaque menu</a>
<a class="inner" href="" title="partial opacity">partial opacity</a>
<a class="inner" href="" title="partial opacity II">partial opacity II</a>
</td></tr></table>
</a>
</div>
<div id="noniemenu">
<div class="holder">
<ul>
<li><a class="outer" href="">DEMOS</a></li>
<li><a class="inner" href="" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="inner" href="" title="Wrapping text around images">wrapping text</a></li>
<li><a class="inner" href="" title="Styling forms">styled form</a></li>
<li><a class="inner" href="" title="Removing active/focus borders">active focus</a></li>
<li><a class="inner second" href="" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<ul id="a3">
<li><a class="inner" href="" title="Styling forms">styled form</a></li>
<li><a class="inner" href="" title="Removing active/focus borders">active focus</a></li>
<li><a class="inner" href="" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
</li>
<li><a class="inner" href="" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a class="inner" href="" title="Image Map for detailed information">image map</a></li>
<li><a class="inner" href="" title="fun with background images">fun backgrounds</a></li>
<li><a class="inner" href="" title="fade-out scrolling">fade scrolling</a></li>
<li><a class="inner" href="" title="em size images compared">em sized images</a></li>
</ul>
</div>
<div class="holder">
<ul>
<li><a class="outer" href="">MENUS</a></li>
<li><a class="inner" href="" title="a coded list of spies">spies menu</a></li>
<li><a class="inner" href="" title="a horizontal vertical menu">vertical menu</a></li>
<li><a class="inner" href="" title="an enlarging unordered list">enlarging list</a></li>
<li><a class="inner" href="" title="an unordered list with link images">link images</a></li>
<li><a class="inner" href="" title="non-rectangular links">non-rectangular</a></li>
<li><a class="inner" href="" title="jigsaw links">jigsaw links</a></li>
<li><a class="inner" href="" title="circular links">circular links</a></li>
</ul>
</div>
<div class="holder">
<ul>
<li><a class="outer" href="">LAYOUTS</a></li>
<li><a class="inner" href="" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a class="inner" href="" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a class="inner" href="" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a class="inner" href="" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a class="inner" href="" title="A simple minimum width layout">minimum width</a></li>
</ul>
</div>
<div class="holder">
<ul>
<li><a class="outer" href="">BOXES</a></li>
<li><a class="inner" href="" title="Left scroll bars">left scroll</a></li>
<li><a class="inner" href="" title="IE6 3px float fix">IE6 3px fix</a></li>
<li><a class="inner" href="" title="Snazzy borders">snazzy borders</a></li>
<li><a class="inner" href="" title="Krazy Korners">krazy korners</a></li>
<li><a class="inner" href="" title="Percentage PLUS pixels">% PLUS pixels</a></li>
<li><a class="inner" href="" title="min-width for IE">IE min-width</a></li>
<li><a class="inner" href="" title="min-height for IE">IE min-height</a></li>
</ul>
</div>
<div class="holder">
<ul>
<li><a class="outer" href="">MOZILLA</a></li>
<li><a class="inner" href="" title="A drop down menu">drop down menu</a></li>
<li><a class="inner" href="" title="A cascading menu">cascading menu</a></li>
<li><a class="inner" href="" title="Using content:">content:</a></li>
<li><a class="inner" href="" title=":hover applied to a div">mozzie box</a></li>
<li><a class="inner" href="" title="I can build a rainbow">rainbow box</a></li>
<li><a class="inner" href="" title="Snooker cue">snooker cue</a></li>
<li><a class="inner" href="" title="Target Practise">target practise</a></li>
<li><a class="inner" href="" title="Two tone headings">two tone headings</a></li>
<li><a class="inner" href="" title="Shadow text">shadow text</a></li>
</ul>
</div>
<div class="holder">
<ul>
<li><a class="outer" href="">EXPLORER</a></li>
<li><a class="inner" href="" title="Example one">example one</a></li>
<li><a class="inner" href="" title="Weft fonts">weft fonts</a></li>
<li><a class="inner" href="" title="Vertical align">vertical align</a></li>
</ul>
</div>
<div class="holder">
<ul>
<li><a class="outer" href="">test</a></li>
<li><a class="inner" href="" title="">DEMO</a></li>
<li><a class="inner" href="" title="">DEMO</a></li>
<li><a class="inner" href="" title="">DEMO</a></li>
<li><a class="inner" href="" title="">DEMO</a></li>
</ul>
</div>
</div>
</div>
</div> 

</div>
</body>
</html>

V__KING__
关注
CSS实现的几款不错的菜单栏
逐梦小涛
02-06 1276
前言      自从做了智慧城市这个项目之后，我一个做后端的开发者，瞬间转为前端开发，不过我还是很喜欢前端的。前端那些事，其实蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！ 一、滑动菜单 1、代码： 1 D
纯CSS菜单栏简单好看的动画（渐现，下拉）
qq_45749658的博客
11-16 1460
整体思路： 下拉特效是通过增加max-height与transition相结合使用形成的动态效果； 渐现的功能是通过给con加一个透明度改变的动画效果实现的； 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo...
纯HTML CSS制作导航栏 下拉菜单
zyg_web的博客
01-07 1万+
纯HTML CSS制作导航栏 下拉菜单
css基础 CSS 导航栏、CSS 下拉菜单
wgchen
04-27 4766
阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航栏内联列表项浮动列表项水平导航条实例链接右对齐添加分割线固定导航条源码示例 1CSS 下拉菜单基本下拉菜单实例解析下拉菜单 导航栏 熟练使用导航栏，对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的。 在我们的例子中我们将建立一个标准的HTML列表导航栏。 导航条基本上是一个链接列表，所以使用
纯css制作网页下拉菜单栏
weixin_44543433的博客
06-09 3648
制作下拉菜单栏的方式有很多，可以通过js显示菜单栏，也可以用伪类等等各种有效方法。那么我呢！尝试用纯的css简单实现菜单栏的功能。 Html布局及css样式代码： 其实就是使用伪类的思想，当鼠标移到按钮，display：block属性就能将下拉菜单内容显示，并且点击则有页面跳转效果。 ...
CSS 下拉菜单
likuoelie的博客
07-24 525
下面是关于的完整中文讲解，包括原理、结构、常用样式和响应式建议，不使用 JavaScript 也能实现基本的交互效果。
CSS导航栏及下拉菜单
BigDaruizi的博客
07-30 8529
       导航栏对于一个网站来说非常重要，熟练地使用CSS可以转换成好看的导航栏而不是枯燥的HTML菜单。导航栏基本上是一个链接列表，所以使用 &lt;ul&gt;&lt;/ul&gt;和 &lt;li&gt;&lt;/li&gt; 元素非常有意义，导航栏就是建立在列表标签的精确熟练使用上。 小复习：伪类的使用方法（图片来源于W3Cschool） （一）垂直导航栏示例 ...
纯css实现下拉菜单(超详细)
热门推荐
qq_28919991的博客
09-26 4万+
纯css写下拉菜单(超详细) ps：博主第一次发文章，不足之处还请指出 话不多说，直接进入正题吧 用ul 和 li标签写一个关联结构(ul 和 li的父子关系浑然天成，一般的关联结构都用它们) &amp;amp;lt;ul class=&amp;quot;nav&amp;quot;&amp;amp;gt; &amp;amp;lt;a href=&amp;quot;#&amp;quot;&amp;amp;gt;服装&amp;a
纯CSS实现导航栏菜单下拉效果
fengxue_snow的博客
07-31 5599
1、效果图 2、代码 <style> /*common css begin*/ *{margin:0px;padding:0px;} body{font-family: 微软雅黑,Microsoft yahei,Arial,Verdana,Tahoma,sans-serif; font-size: 12px;} a { color: #666; text-de...
HTML+CSS - 导航栏下拉菜单
weixin_45959965的博客
12-17 2257
【代码】HTML+CSS - 导航栏下拉菜单。
纯css实现的下拉导航栏附html结构及css样式
09-25
通过以上CSS样式，我们就可以实现一个基础的纯CSS下拉导航栏。你可以根据自己的需求调整颜色、字体、布局等细节。值得注意的是，虽然这个例子使用了绝对定位，但在某些情况下，使用`flexbox`或`grid`布局可能会更...
纯css实现水平下拉导航菜单
04-07
纯CSS实现的下拉导航菜单不仅可以减少对JavaScript的依赖，还能提高网页加载速度和可访问性。本文将详细介绍如何使用CSS创建一个具有三级下拉功能的导航菜单。 首先，我们需要在HTML中构建基本的菜单结构。一个简单...
黑色css3导航栏下拉菜单动画特效
11-19
本主题主要关注的是“黑色css3导航栏下拉菜单动画特效”，下面我们将深入探讨这一话题。 首先，CSS3的下拉菜单是一种常见的网页交互元素，常用于网站顶部导航，用于展示多层次的链接结构。下拉菜单通常在鼠标悬停在...
菜单栏下拉菜单特效代码
03-20
接着，为了实现"菜单栏下拉菜单随滚动条滚动一直固定在页面顶部"的特效，我们需要使用CSS的`position`属性。设置菜单栏为`position: fixed`，并指定适当的`top`值，使其在页面滚动时始终保持在视口顶部。同时，为了...
纯CSS3图标菜单下拉收缩代码
04-25
本资源"纯CSS3图标菜单下拉收缩代码"就是一个很好的实例，展示了如何仅用CSS3实现一个功能完备的导航菜单，包括下拉和收缩功能。 首先，让我们了解一下CSS3的关键特性在该菜单中的应用： 1. **伪类选择器**：CSS3...
750W高PF值充电机电源方案：基于UCC28070、ST6599和PIC16F193X的设计与实现
08-08
750W高功率因数（PF）充电机电源设计方案，采用TI公司的UCC28070作为交错式PFC控制器，ST公司ST6599用于LLC谐振变换，以及Microchip的PIC16F193X作为主控芯片。文中不仅提供了详细的原理图、设计文件和烧录程序，还分享了实际调试经验和技术细节。具体来说，PFC环节通过优化乘法器补偿和电流环参数实现了极高的PF值；LLC部分则着重于死区时间和谐振腔参数的精确配置；单片机部分负责状态管理和故障保护等功能。最终方案实测效率达到94%，相比传统方案节能显著。 适合人群：电力电子工程师、硬件开发者、嵌入式系统设计师，特别是对高效电源设计感兴趣的读者。 使用场景及目标：适用于需要设计高性能、高效率充电机的企业和个人开发者。目标是在满足高功率因数的同时，提高转换效率并降低能耗。 其他说明：附带完整的原理图、设计文件和烧录程序，有助于读者快速上手并进行实际项目开发。同时引用了华南理工大学硕士学位论文的相关理论支持，使方案更具权威性和可靠性。
JAVA控制台命令详解.pdf
08-08
JAVA控制台命令详解
远程PLC通讯编程调试监控方案：基于安全验证型中转服务器的云边协同解决方案
08-08
内容概要：本文介绍了远程PLC通讯编程调试监控方案，旨在解决传统PLC设备调试和维护过程中遇到的距离限制和技术支持难题。该方案采用安全验证型中转服务器，支持自定义网络设备接入，实现上千路PLC设备的并发对接调试。通过云边协同技术，实现了远程编程、实时监控和故障诊断等功能，极大提升了工作效率和设备稳定性。文中详细阐述了方案的核心——安全验证型中转服务器的工作原理及其提供的服务器和客户端源代码，强调了每个通信数据包均经过严格加密和验证，确保数据传输的安全性。此外，文章还探讨了云边协同带来的优势以及代码编写过程中的技术挑战和成就感。 适合人群：从事工业自动化领域的工程师、技术人员，尤其是那些负责PLC设备调试和维护的专业人士。 使用场景及目标：适用于需要远程调试和监控PLC设备的场合，如偏远地区的工程项目、大型制造企业等。主要目标是提高PLC设备的调试效率，减少现场维护成本，增强设备的可靠性和安全性。 其他说明：该方案不仅解决了实际工程中的痛点，也为工程师们提供了更多技术探索的机会，特别是关于云边协同技术和安全验证机制的学习和实践。
L-noodle-react-big-screen-13768-1753357219888.zip
最新发布
08-08
cursor免费次数用完L-noodle_react-big-screen_13768_1753357219888.zip
实现自适应宽度的纯CSS导航下拉菜单
纯CSS下拉菜单是一种常见的Web界面设计元素，它允许用户通过鼠标悬停或点击来展开一个子菜单，展示更多的导航选项或链接。在现代网页设计中，纯CSS实现的下拉菜单具有轻量级、易于实现和兼容性好的优点。然而，由于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值