纯CSS多级半透明菜单

最新推荐文章于 2023-03-16 10:18:30 发布
最新推荐文章于 2023-03-16 10:18:30 发布
阅读量709 收藏
点赞数

http://pc.21edu8.com/html/wangyetexiao/caidandaohang/20120615/15176.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS多级透明菜单</title>
<style>
#nav {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 100; BACKGROUND: #999999  ; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 10px arial, verdana, sans-serif; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: relative
}
#nav UL {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 100; BACKGROUND:  #999999; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 10px arial, verdana, sans-serif; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: relative
}
#nav {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #528e34; PADDING-BOTTOM: 0px; WIDTH: 740px; PADDING-TOP: 0px; HEIGHT: 23px
}
#nav TABLE {
 BORDER-COLLAPSE: collapse
}
#nav LI {
 FLOAT: left
}
#nav LI LI {
 FLOAT: none
}
#nav LI A LI {
 FLOAT: left
}
#nav LI A {
 PADDING-RIGHT: 20px; DISPLAY: block; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FLOAT: left; PADDING-BOTTOM: 0px; BORDER-LEFT: #528e34 1px solid; COLOR: #fff; LINE-HEIGHT: 22px; PADDING-TOP: 0px; WHITE-SPACE: nowrap; HEIGHT: 23px; TEXT-DECORATION: none
}
#nav LI LI A {
 FLOAT: none; LINE-HEIGHT: 20px; HEIGHT: 21px
}
#nav LI:hover {
 Z-INDEX: 100; POSITION: relative
}
#nav A:hover {
 Z-INDEX: 100; BACKGROUND: #779e25; BORDER-LEFT: #779e25 1px solid; COLOR: #fff; POSITION: relative
}
#nav LI:hover > A {
 BACKGROUND: #779e25; BORDER-LEFT: #779e25 1px solid; COLOR: #fff
}
#nav :hover UL {
 Z-INDEX: 300; LEFT: 0px; BORDER-LEFT: #779e25 1px solid; TOP: 23px
}
#nav A:hover UL {
 LEFT: -1px
}
#nav UL {
 LEFT: -9999px; POSITION: absolute; TOP: -9999px
}
#nav LI:hover LI:hover > UL {
 LEFT: 0px; MARGIN-LEFT: 100%; TOP: 0px
}
#nav LI:hover > UL UL {
 LEFT: -9999px; WIDTH: auto; POSITION: absolute; TOP: -9999px
}
#nav LI:hover LI:hover > A {
 BACKGROUND: #779e25; BORDER-LEFT: #779e25 1px solid; COLOR: #fff
}
#nav LI A:hover UL LI A:hover {
 BACKGROUND: #779e25
}
#nav A:hover A:hover UL {
 LEFT: 100%; TOP: 0px
}
#nav A:hover A:hover A:hover UL {
 LEFT: 100%; TOP: 0px
}
#nav A:hover A:hover A:hover A:hover UL {
 LEFT: 100%; TOP: 0px
}
#nav A:hover A:hover A:hover A:hover A:hover UL {
 LEFT: 100%; TOP: 0px
}
#nav A:hover UL UL {
 LEFT: -9999px; POSITION: absolute; TOP: -9999px
}
#nav A:hover A:hover UL UL {
 LEFT: -9999px; POSITION: absolute; TOP: -9999px
}
#nav A:hover A:hover A:hover UL UL {
 LEFT: -9999px; POSITION: absolute; TOP: -9999px
}
#nav A:hover A:hover A:hover A:hover UL UL {
 LEFT: -9999px; POSITION: absolute; TOP: -9999px
}

</style>
</head>

<body>


<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#"><!--[if gte IE 7]><!-->菜单一</a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
  <li><a href="#">百度菜单</a></li>
  <li><a href="#">百度菜单</a></li>
  <li><a href="#">百度菜单</a></li>
 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">菜单二&raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="#">百度菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
   <li><a href="#">百度菜单</a></li>
   <li><a href="#">百度菜单</a></li>
   <li><a href="#">百度菜单</a></li>
   <li><a href="#">百度菜单</a></li>
   <li><a href="#">百度菜单</a></li>
   <li><a href="#">百度菜单</a></li>
  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href="#">百度菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
   <li><a href="#">百度菜单</a></li>
   <li><a href="#">百度菜单</a></li>
   <li><a href="#">百度菜单</a></li>
   <li><a href="#">百度菜单</a></li>
   <li><a href="#">百度菜单</a></li>
  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href="#">百度菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
   <li><a href="#">百度菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
    <li><a href="#">百度菜单</a></li>
    <li><a href="#">百度菜单</a></li>
    <li><a href="#">百度菜单</a></li>
    <li><a href="#">百度菜单</a></li>
    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="#">百度菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
     <li><a href="#">百度菜单</a></li>
     <li><a href="#">百度菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
       <li><a href="#">百度菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
         <li><a href="#">百度菜单</a></li>
         <li><a href="#">百度菜单</a></li>
         <li><a href="#">百度菜单</a></li>
         <li><a href="#">百度菜单</a></li>
         <li><a href="#">百度菜单</a></li>
         <li><a href="#">百度菜单</a></li>
        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="#">百度菜单</a></li>
       <li><a href="#">百度菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
         <li><a href="#">百度菜单</a></li>
         <li><a href="#">百度菜单</a></li>
         <li><a href="#">百度菜单</a></li>
         <li><a href="#">百度菜单</a></li>
         <li><a href="#">百度菜单</a></li>
         <li><a href="#">百度菜单</a></li>
         </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="#">百度菜单</a></li>
       <li><a href="#">百度菜单</a></li>
       </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a href="#">百度菜单</a></li>
     <li><a href="#">百度菜单</a></li>
     </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="#">百度菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
    <li><a href="#">网页殊效</a></li>
    <li><a href="#">百度菜单</a></li>
    <li><a href="#">百度菜单</a></li>
    <li><a href="#">百度菜单</a></li>
    <li><a href="#">百度菜单</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="#">百度菜单</a></li>
 <li><a href="#">百度菜单</a></li>
 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
<li><a href="#">菜单三&raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
  <li><a href="#">百度菜单</a></li>
  <li><a href="#">百度菜单</a></li>
  <li><a href="#">百度菜单</a></li>
 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">菜单四&raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
  <li><a href="#">百度菜单</a></li>
  <li><a href="#">百度菜单</a></li>
 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">菜单五</a></li>
</ul>
</body>
</html>

 

mznxbcv1
关注
十分漂亮的纯CSS透明展开菜单打包
06-08
十分漂亮的纯CSS透明展开菜单打包，十分漂亮的纯CSS透明展开菜单打包
漂亮的透明css菜单 下拉效果
weixin_33877885的博客
11-13 341
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
透明的(transparence)CSS菜单
zgqtxwd的专栏
04-30 419
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
CSS透明技术实现的漂亮菜单.rar
07-10
CSS透明技术实现的漂亮菜单，貌似是无限级，如演示所示，已经支持到6级了，相信大部分网站用不了这么多层次的菜单吧，因此这个菜单还是相当有使用价值的，而且代码配置方面，也是很容易上手的，本菜单在背景图片的衬托下，增色了不少。
css实现下拉菜单透明资料
03-16
css实现下拉菜单透明资料
jquery css3半透明三级导航.zip
07-04
在这个半透明三级导航中，CSS3被用来实现半透明效果，通过调整`opacity`属性，可以控制菜单元素的透明度，同时，CSS3的`transition`和`animation`属性可以实现平滑的过渡和动态效果，增强用户的视觉体验。...
20个超漂亮实用的纯CSS web2.0导航菜单模板
06-17
5. **色彩与质感**：通过调整背景色、边框、阴影等，可以营造出不同的视觉风格，如扁平化、质感、半透明等。 6. **易用性与无障碍**：优秀的导航菜单应考虑到所有用户的需求，包括那些有视觉障碍的人。使用ARIA属性...
jQuery企业网站半透明下拉导航.zip
07-04
半透明效果则是通过CSS3的透明度属性（opacity）和渐变（gradient）实现的，这使得下拉菜单在视觉上既优雅又不失专业感。 实现这一效果的关键步骤包括： 1. **HTML结构**：首先，我们需要构建一个符合要求的HTML...
半透明菜单导航
weixin_30306905的博客
12-03 489
在线演示 本地下载 转载于:https://www.cnblogs.com/qixidi/p/10060690.html
背景透明的二级竖向下拉菜单
06-05
竖向二级下拉菜单，支持背景透明哦
微信小程序----导航栏透明渐变
12-20
微信小程序----导航栏透明渐变：采用css3的颜色值rgba，通过改变其中a的值，来实现。
js+css3透明渐变风格导航菜单js特效
最新发布
ICode联盟
03-16 129
基于js+css3绘制的一款透明渐变风格导航菜单特效，整个页面背景也是渐变效果。
CSS右键菜单
枫叶轻翔的博客
06-18 1502
<style> .menu { width: 100px; font-size: 14px; font-family: "微软雅黑"; border: 1px solid #ccc; z-index: 9999; position...
半透明效果导航菜单
weixin_30662849的博客
12-08 298
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml</a>"> <head&g...
CSS实现导航栏半透明背景效果
smx6666668的博客
03-25 3152
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景半透明例子</title> <style> body { background-color: deeppink; } div { width: 200px; .
css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果
m0_49608552的博客
07-30 4897
css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果
使用纯CSS创建多级半透明菜单的代码示例
"纯CSS实现多级半透明效果菜单代码" 在网页设计中，菜单是不可或缺的元素，它用于组织和导航网站的内容。本资源主要介绍如何使用纯CSS（Cascading Style Sheets）来创建一个具有多级半透明效果的菜单，这对于网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值