漂亮的透明css菜单 下拉效果

最新推荐文章于 2025-08-15 16:03:53 发布
转载 最新推荐文章于 2025-08-15 16:03:53 发布 · 66 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/Athrun/archive/2008/11/13/1332740.html

本文介绍了一个使用CSS设计的漂亮且透明的菜单样式。该菜单具备3D效果，并通过多种CSS属性实现了复杂的下拉子菜单布局及交互效果。文章提供了完整的HTML和CSS代码，展示了如何通过不同的浏览器条件注释来兼容各种浏览器。
<!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菜单</title>
<style type="text/css">
#wrapper {width:750px; margin:0 auto;}
#background {width:750px; height:440px; background:url(http://www.stunicholls.myby.co.uk/pro_drop12/model3.jpg); padding-top:10px;}
#menu2 {padding:0; width:750px; margin:0; list-style:none; height:28px; position:relative; z-index:500; font-family:arial, verdana, sans-serif; background:#000; border-bottom:1px solid #edb;}
#menu2 li.top {display:block; float:left;}
#menu2 li a.top_link {display:block; height:25px; float:left; line-height:22px; font-size:11px; font-weight:bold; padding:0 20px 0 10px; color:#edb; text-decoration:none; border-top:3px solid #000;}
#menu2 li a.top_link:hover {color:#d85; border-color:#a52;}
#menu2 li:hover > a.top_link {color:#d85; border-color:#a52;}
#menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
#menu2 a:hover {visibility:visible; position:relative; z-index:200;}
#menu2 li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
#menu2 ul, 
#menu2 :hover ul ul, 
#menu2 :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; height:0; margin:0; padding:0; list-style:none;}
#menu2 :hover ul.sub {left:0; top:25px; white-space:nowrap; width:120px; height:auto; z-index:300; padding-top:5px; background:url(http://www.stunicholls.myby.co.uk/pro_drop12/trans.gif);}
#menu2 :hover ul.sub li {display:block; float:left; width:100%; height:25px;}
#menu2 :hover ul.sub li span {display:block; height:25px; float:left; width:90px; font-weight:normal;}
#menu2 :hover ul.sub li label{display:block; height:25px; float:left; width:30px; font-weight:normal;}
#menu2 :hover ul.sub li a {display:block; position:relative; font-size:11px; height:25px; width:120px; margin-right:-30px; line-height:25px; text-indent:10px; color:#edb; text-decoration:none; background:url(http://www.stunicholls.myby.co.uk/pro_drop12/trans.gif);}
#menu2 :hover ul.sub li span a:hover {color:#f97;}
#menu2 :hover ul.sub li:hover > span a {color:#f97;}
#menu2 :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:120px; top:0; white-space:nowrap; width:120px; z-index:400; height:auto;}
#menu2 :hover ul.wide {width:150px;}
#menu2 :hover ul.wide li span {width:120px;}
#menu2 :hover ul.wide li a {width:150px;}
#menu2 :hover ul.narrow {width:90px;}
#menu2 :hover ul.narrow li span {width:60px;}
#menu2 :hover ul.narrow li a {width:90px;}
#menu2 :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul.narrow :hover ul
{left:90px;}
#menu2 li > span {
background: url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-midleft.png);
}
#menu2 li >label{
background: url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-midright.png)
}
#menu2 li.fly >label{
background: url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-midright-sub.png)
}
#menu2 li.subtop > span,
#menu2 li.flytop > span { 
background:url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-topleft.png);
}
#menu2 li.subtop >label{
background:url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-topright.png);
}
#menu2 li.flytop >label{
background:url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-topright-sub.png);
}
#menu2 li.subbot > span,
#menu2 li.flybot > span {
height:35px !important; background:url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-botleft.png);
}
#menu2 li.subbot >label{
height:35px !important; background:url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-botright.png);
}
#menu2 li.flybot >label{
height:35px !important; background:url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-botright-sub.png);
}
</style>
<!--[if lte IE 6]>

<![endif]-->
</head>
<body>
<h2>3D menu series</h2>
<ul id="menu2">
 <li class="top"><a href="http://www.cnblogs.com/joe235/" class="top_link">Home</a></li>
 <li class="top"><a href="http://www.cnblogs.com/joe235/" class="top_link">Contacts<!--[if gte IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="sub">
   <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">Support</a></span><label></label></li>
   <li class="fly"><span><a href="http://www.cnblogs.com/joe235/">Sales<!--[if gte IE 7]><!--></a></span><label></label><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
     <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">USA</a></span><label></label></li>
     <li><span><a href="http://www.cnblogs.com/joe235/">Canadian</a></span><label></label></li>
     <li><span><a href="http://www.cnblogs.com/joe235/">South American</a></span><label></label></li>
     <li class="fly"><span><a href="http://www.cnblogs.com/joe235/">European<!--[if IE 7]><!--></a></span><label></label><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="narrow">
       <li class="flytop"><span><a href="http://www.cnblogs.com/joe235/">British<!--[if gte IE 7]><!--></a></span><label></label><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="narrow">
         <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">London</a></span><label></label></li>
         <li><span><a href="http://www.cnblogs.com/joe235/">Liverpool</a></span><label></label></li>
         <li><span><a href="http://www.cnblogs.com/joe235/">Glasgow</a></span><label></label></li>
         <li class="fly"><span><a href="http://www.cnblogs.com/joe235/">Bristol<!--[if gte IE 7]><!--></a></span><label></label><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul class="narrow">
           <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">Redland</a></span><label></label></li>
           <li><span><a href="http://www.cnblogs.com/joe235/">Hanham</a></span><label></label></li>
           <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">Eastville</a></span><label></label></li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
         </li>
         <li><span><a href="http://www.cnblogs.com/joe235/">Cardiff</a></span><label></label></li>
         <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">Belfast</a></span><label></label></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
       </li>
       <li><span><a href="http://www.cnblogs.com/joe235/">French</a></span><label></label></li>
       <li><span><a href="http://www.cnblogs.com/joe235/">German</a></span><label></label></li>
       <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">Spanish</a></span><label></label></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
     </li>
     <li><span><a href="http://www.cnblogs.com/joe235/">Australian</a></span><label></label></li>
     <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">Asian</a></span><label></label></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
   </li>
   <li><span><a href="http://www.cnblogs.com/joe235/">Buying</a></span><label></label></li>
   <li><span><a href="http://www.cnblogs.com/joe235/">Photographers</a></span><label></label></li>
   <li><span><a href="http://www.cnblogs.com/joe235/">Stockist</a></span><label></label></li>
   <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">General</a></span><label></label></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li class="top"><a href="http://www.cnblogs.com/joe235/" class="top_link">Services<!--[if gte IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="sub">
   <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">Printing</a></span><label></label></li>
   <li><span><a href="http://www.cnblogs.com/joe235/">Photo Framing</a></span><label></label></li>
   <li><span><a href="http://www.cnblogs.com/joe235/">Retouching</a></span><label></label></li>
   <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">Archiving</a></span><label></label></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li class="top"><a href="http://www.cnblogs.com/joe235/" class="top_link">Products<!--[if gte IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="sub">
   <li class="flytop"><span><a href="http://www.cnblogs.com/joe235/">Cameras<!--[if gte IE 7]><!--></a></span><label></label><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul class="narrow">
      <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">Nikon</a></span><label></label></li>
      <li><span><a href="http://www.cnblogs.com/joe235/">Minolta</a></span><label></label></li>
      <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">Pentax</a></span><label></label></li>
     </ul>
     <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
   </li>
   <li class="fly"><span><a href="http://www.cnblogs.com/joe235/">Lenses<!--[if gte IE 7]><!--></a></span><label></label><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
      <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">Wide Angle</a></span><label></label></li>
      <li><span><a href="http://www.cnblogs.com/joe235/">Standard</a></span><label></label></li>
      <li><span><a href="http://www.cnblogs.com/joe235/">Telephoto</a></span><label></label></li>
      <li class="fly"><span><a href="http://www.cnblogs.com/joe235/">Zoom<!--[if gte IE 7]><!--></a></span><label></label><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul>
        <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">35mm to 125mm</a></span><label></label></li>
        <li><span><a href="http://www.cnblogs.com/joe235/">50mm to 250mm</a></span><label></label></li>
        <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">125mm to 500mm</a></span><label></label></li>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
      </li>
      <li><span><a href="../boxes/">Mirror</a></span><label></label></li>
      <li class="flybot"><span><a href="http://www.cnblogs.com/joe235/">Non standard<!--[if gte IE 7]><!--></a></span><label></label><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul>
        <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">Bayonet mount</a></span><label></label></li>
        <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">Screw mount</a></span><label></label></li>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
      </li>
     </ul>
     <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
   </li>
   <li><span><a href="http://www.cnblogs.com/joe235/">Flash Guns</a></span><label></label></li>
   <li><span><a href="http://www.cnblogs.com/joe235/">Tripods</a></span><label></label></li>
   <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">Filters</a></span><label></label></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
 </li>
 <li class="top"><a href="http://www.cnblogs.com/joe235/" class="top_link">Where to find us<!--[if gte IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="sub wide">
   <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">Travelling by car or rail</a></span><label></label></li>
   <li><span><a href="http://www.cnblogs.com/joe235/">Using public transport</a></span><label></label></li>
   <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">Our place on the map</a></span><label></label></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
 </li>
 <li class="top"><a href="http://www.cnblogs.com/joe235/" class="top_link">Shop<!--[if gte IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="sub narrow">
   <li class="subtop"><span><a href="http://www.cnblogs.com/joe235/">Online</a></span><label></label></li>
   <li><span><a href="http://www.cnblogs.com/joe235/">Catalogue</a></span><label></label></li>
   <li class="subbot"><span><a href="http://www.cnblogs.com/joe235/">Mail Order</a></span><label></label></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a></span><label></label><![endif]-->
 </li>
 <li class="top"><a href="http://www.cnblogs.com/joe235/" id="privacy" class="top_link">Privacy Policy</a></li>
</ul>
<img src="http://www.stunicholls.myby.co.uk/pro_drop12/model3.jpg" alt="model" title="model" />
</body>
</html>

转载于:https://www.cnblogs.com/Athrun/archive/2008/11/13/1332740.html

纯CSS菜单栏简单好看的动画（渐现，下拉）
qq_45749658的博客
11-16 1463
整体思路： 下拉特效是通过增加max-height与transition相结合使用形成的动态效果； 渐现的功能是通过给con加一个透明度改变的动画效果实现的； 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo...
js悬浮二级菜单代码_JavaScript实现下拉二级菜单详解
weixin_39537049的博客
11-21 1325
下拉菜单最终效果如图：实现原理，通过绝对定位的方式，使下拉列表脱离文档流。通过js或者css来控制鼠标移入后的效果初始时可以改变 1.display：none;使其隐藏2.height：0px;改变高度使其隐藏 -->加上下面代码可以实现菜单的**上升下拉逐渐出现动画效果**transition: height 2s ease;3.opacity：0；改变透明度使其隐藏-->加上下...
CSS导航菜单设计技巧集锦
weixin_42522857的博客
09-22 1656
本文还有配套的精品资源，点击获取 简介：网页导航菜单是用户浏览网站的核心，CSS以其强大的样式控制能力，使得我们可以创建既美观又功能强大的导航菜单。本文将为你展示五个漂亮的CSS导航菜单设计案例，并详细介绍如何使用CSS实现响应式设计、水平与垂直导航、下拉菜单、颜色和背景搭配、过渡与动画效果、字体与图标集成、hover效果、布局与定位技术、无障碍性设计以及代码结构优化。通过...
jquery下拉菜单_带有jQuery和CSS3的下拉菜单菜单
culiao9310的博客
09-28 205
jquery下拉菜单View demo 查看演示Download Source 下载源In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnai...
JavaScript实现下拉二级菜单详解
qq_40641206的博客
02-13 5290
下拉菜单最终效果如图： 实现原理，通过绝对定位的方式，使下拉列表脱离文档流。通过js或者css来控制鼠标移入后的效果 初始时可以改变 1.display：none;使其隐藏 2.height：0px;改变高度使其隐藏 –>加上下面代码可以实现菜单的上升下拉逐渐出现动画效果 transition: height 2s ease; 3.opacity：0；改变透明度使其隐藏 –>加上...
如何创建纯CSS3下拉菜单
萌萌的It人 www.itmmd.com
05-25 6068
本节教程中我们将介绍如何只使用css3创建一个漂亮的导航下拉菜单，兼容所有主流浏览器，包括ie7，ie8当然在ie7/8浏览器中一些css3特性就不支持了，比如圆角，但是整个菜单还是可以很好地显示滴。接下来开始教程~ 在线演示   源码下载 第一步：HTML标签结构 这里我们使用ul无序列表来实现HTML结构，同时每一个菜单项都是一个超链接，子菜单项也是用相同的结构。 1
构建漂亮的CSS导航栏布局教程
weixin_42603332的博客
08-15 882
CSS布局是前端开发中用于决定网页内容如何在浏览器窗口中展示的一种技术。布局涉及到元素在页面中的位置、方向和尺寸的管理。理解布局的原理和使用布局工具对于创建美观且可用的网页至关重要。CSS的盒模型是页面布局的基础，它定义了元素如何显示以及它们是如何与其他元素互动的。盒模型由四个部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。内容（content）：实际显示的元素内容，可以是文本、图片、视频等。内边距（padding）
CSS3响应式导航菜单特效设计
weixin_42466857的博客
07-13 827
随着CSS3特性的增多，实现令人惊叹的导航特效变得轻而易举。例如，我们可以轻松地为导航菜单添加平滑滚动、悬停动画效果、透明度变化等。在这个部分，我们会介绍几种常见的导航特效，并展示其代码实现。
CSS学习，常用常记（下拉菜单，提示工具，）
Sinhaeng_Hhjian
03-23 416
响应式顶部导航：如何使用 CSS3 媒体查询来创建一个响应式导航。 响应式边栏导航：如何使用 CSS3 媒体查询来创建一个边栏导航。 导航下拉菜单：在导航条内部设置下拉菜单 基本下拉菜单 当鼠标移动到指定元素上时，会出现下拉菜单。 <!DOCTYPE html> <html> <head> <title>下拉菜单实例|菜鸟教程(runoo...
这是一款使用html5svg和css3制作的炫酷select下拉菜单美化效果
08-10
在这个项目中，我们看到的是如何利用这两者以及JavaScript来实现一个炫酷的Select下拉菜单美化效果。让我们深入探讨一下这些技术及其在创建这种效果时的应用。 首先，HTML5的`<select>`元素是网页表单中常见的组件...
漂亮的CSS横向下拉菜单导航条
04-08
本文将深入探讨“漂亮的CSS横向下拉菜单导航条”这一主题，分享五款精心设计的下拉菜单导航条实例，旨在提升用户体验和网站的整体美观度。 首先，CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或...
五款漂亮的CSS横向下拉菜单导航条
09-09
本篇文章将深入探讨五款利用CSS技术打造的漂亮横向下拉菜单导航条的设计原理和实现方法。 1. **基础理解**： - **CSS（Cascading Style Sheets）**：层叠样式表，用于定义HTML或XML（包括SVG、XHTML等）文档的呈现...
基于shell的文件复制系统，北京理工大学 计算机学院大三 操作系统 课程实验。.zip
最新发布
09-07
基于shell的文件复制系统，北京理工大学 计算机学院大三 操作系统 课程实验。.zip
【微信小程序源码】天天快拍.zip
09-06
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用微信小程序源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
nuke id通道提取测试文件
09-06
nuke id通道提取测试文件
【微信小程序源码】云笔记.zip
09-06
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用微信小程序源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
基于Word2vec语义理解与个性化搜索增强的智能搜索引擎系统_使用Scrapy230框架高效爬取知乎问答数据并通过ElasticSearch791分布式存储与索引构建_结.zip
09-06
基于Word2vec语义理解与个性化搜索增强的智能搜索引擎系统_使用Scrapy230框架高效爬取知乎问答数据并通过ElasticSearch791分布式存储与索引构建_结.zip
proto-google-common-protos-2.37.1.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值