CSS多级滑动门效果导航菜单代码

最新推荐文章于 2024-04-15 19:53:44 发布
最新推荐文章于 2024-04-15 19:53:44 发布
阅读量2.2k 收藏 2
点赞数 1
文章标签： css class ie float url xhtml

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=gb2312" />
<title>纯CSS多级滑动门效果导航菜单</title>
<style type="text/css">
#info {width:750px; margin:0 auto;}
#outer {width:750px; height:81px; position:relative;
background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/back.gif) repeat-x; margin:0 auto;}
#menuHolder {position:relative; float:left; left:50%;}
#dropline {padding:0; list-style:none; text-align:center;
margin:0; float:left; position:relative; right:50%;
font-size:12px; font-family:arial, sans-serif; height:41px;}
#dropline table {margin:-2px -10px;}
#dropline div.inner {padding:0; margin:0 auto; list-style:none;
position:absolute; left:-9999px; text-align:center; background:#84c7e0;
width:100%; z-index:20;height:29px;}
* html #dropline div.inner {
width:expression(document.getElementById('dropline').offsetWidth);}
#dropline li {float:left;}
#dropline li a {display:block; float:left; height:51px; padding:0 20px 0 0;
background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/tabs.gif) right top; line-height:50px;
text-decoration:none; color:#fff;}
#dropline li a.sub {display:block; float:left; height:51px;
padding:0 25px 0 0; background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/tabs-arrow.gif) right top;
line-height:50px; text-decoration:none; color:#fff;}
#dropline li a b {display:block; height:51px; float:left;
padding:0 0 0 20px; background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/tabs.gif) left top; cursor:pointer;}
#dropline li a:hover {background-position:right bottom;
color:#000;line-height:40px;}
#dropline li a:hover b {background-position:left bottom;}
#dropline li:hover > a {background-position:right bottom;
color:#000; line-height:40px;}
#dropline li:hover > a b {background-position:left bottom;}
#dropline li.current a,
#dropline li.current a:hover {background-position:right bottom;
color:#008; line-height:40px;}
#dropline li.current a b {background-position:left bottom;
font-weight:normal;}
#dropline :hover div.inner {left:0; top:51px; height:29px;}
#dropline :hover div.lineHolder {float:left; position:relative;left:50%;}
#dropline li.current div.inner {left:0; top:51px; z-index:10;}
#dropline li.current div.lineHolder {float:left;
position:relative;left:50%;}
#dropline li.current ul {float:left; position:relative;
right:50%; height:29px;}
#dropline ul {padding:0; margin:0; list-style:none; position:relative;
float:left; right:50%; z-index:1}
#dropline ul li {float:left;}
#dropline ul li a {color:#000; float:left; height:29px; line-height:27px;
padding:0 10px 0 0; background:#84c7e0;}
#dropline ul li a b {height:29px; line-height:27px; padding:0 0 0 10px;
background:#84c7e0; font-weight:normal;}
#dropline ul ul {padding:0; margin:0; list-style:none; position:absolute;
left:-9999px; width:0;}
#dropline li.current ul li.current_sub a b {color:#008;}
#dropline li.current ul li a.drop {padding:0 14px 0 0;
background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/subtab-arrow-off.gif) right top;}
#dropline li.current ul li.current_sub a.drop {padding:0 14px 0 0;
background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/subtab-arrow-off.gif) right top;}
#dropline :hover ul li a:hover {position:relative;
background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/subtab.gif) right top;}
#dropline :hover ul li a.drop {background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/subtab-arrow-off.gif) right top;}
#dropline :hover ul li a.drop:hover {
background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/subtab-arrow.gif) right top;}
#dropline :hover ul li a:hover b {background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/subtab.gif) left top;}
#dropline li.current ul li a {color:#000; height:29px; line-height:27px;
padding:0 10px 0 0; background:#84c7e0;}
#dropline li.current ul li a b {height:29px; line-height:27px;
padding:0 0 0 10px; background:#84c7e0;}
#dropline li.current ul ul {padding:0; margin:0; list-style:none;
position:absolute; left:-9999px; width:0;}
#dropline :hover ul li:hover > a.drop {
background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/subtab-arrow.gif) right top;}
#dropline li.current ul li:hover > a.drop {
background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/subtab-arrow.gif) right top;}
#dropline :hover ul li:hover > a b {background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/subtab.gif) left top;}
#dropline :hover ul ul {padding:0; margin:0; list-style:none;
position:absolute; left:-9999px; width:0;}
#dropline :hover ul li:hover {position:relative; z-index:9999}
#dropline :hover ul :hover ul {left:-1px; top:29px; width:150px;
background:transparent;}
#dropline :hover ul :hover ul li {border-left:1px solid #2f93b9;
border-right:1px solid #2f93b9;}
#dropline :hover ul :hover ul li.last {border-bottom:1px solid #2f93b9;}
#dropline :hover ul :hover ul li a {height:25px; line-height:25px;
text-align:left; padding:0 0 0 10px; width:140px; background:#9cd2e6;}
#dropline :hover ul :hover ul li a.fly {text-align:left; padding:0 0 0 10px;
width:140px; background:#9cd2e6 url(http://cssdh.mianfeimoban.com/uploadfile/2012/0307/20120307050732310/menu/menu_5/fly.gif) no-repeat right center;}
#dropline :hover ul :hover ul li a:hover {background:#b0d9ea;}
#dropline :hover ul :hover ul li:hover > a {background:#b0d9ea;}
#dropline :hover ul :hover ul ul {position:absolute; left:-9999px; width:0;}
#dropline :hover ul :hover ul :hover ul {left:120px; width:150px; top:0;}
#dropline :hover ul :hover ul :hover ul li {border-left-color:#eef;}
#dropline :hover ul :hover ul :hover ul li.first {border-top:1px solid #eef;}
#dropline :hover ul :hover ul :hover ul li a {background:#b0d9ea;
filter: alpha(opacity=85);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
 -moz-opacity: 0.85; opacity:0.85;
}
#dropline :hover ul :hover ul :hover ul li a:hover {background:#c2e1ef;}
img {display:block;}
</style>

</head>

<body>
<div id="info">
<div id="outer">
<div id="menuHolder">
<ul id="dropline">
<li class="first"><a href="index.html"><b>Home</b>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="inner"></div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="single.html"><b>Contact Us</b>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="inner"></div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="dropdown.html"><b>Resort</b>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="inner"><div class="lineHolder">
<ul>
<li><a href="http://www.mianfeimoban.com"><b>Ski Hire</b></a></li>
<li><a class="drop" href="http://www.mianfeimoban.com"><b>Ski Slopes</b>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mianfeimoban.com">Beginners</a></li>
<li><a href="http://www.mianfeimoban.com">Intermediate</a></li>
<li><a class="fly" href="http://www.mianfeimoban.com">Advanced
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="first"><a href="http://www.mianfeimoban.com">Local</a></li>
<li><a href="http://www.mianfeimoban.com">Nearby</a></li>
<li><a href="http://www.mianfeimoban.com">With instructor</a></li>
<li class="last"><a href="http://www.mianfeimoban.com">Snow boarding</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="last"><a href="http://www.mianfeimoban.com">Expert</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.mianfeimoban.com"><b>Night Life</b></a></li>
<li><a class="drop" href="http://www.mianfeimoban.com"><b>Restaurants</b>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mianfeimoban.com">Snow Hotel</a></li>
<li><a href="http://www.mianfeimoban.com">The Snowman</a></li>
<li><a href="http://www.mianfeimoban.com">Ice Cavern</a></li>
<li class="last"><a href="http://www.mianfeimoban.com">Ski Inn</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="last" href="http://www.mianfeimoban.com"><b>Car Hire</b></a></li>
</ul>
</div></div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="current"><a class="sub" href="dropline.html"><b>Information</b>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="inner"><div class="lineHolder">
<ul>
<li><a href="http://www.mianfeimoban.com"><b>Money</b></a></li>
<li class="current_sub"><a class="drop" href="http://www.mianfeimoban.com">
<b>Essentials</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mianfeimoban.com">Lift Passes</a></li>
<li><a href="http://www.mianfeimoban.com">Insurance</a></li>
<li><a class="fly" href="http://www.mianfeimoban.com">Gear Rental
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="first"><a href="http://www.mianfeimoban.com">Boots</a></li>
<li><a href="http://www.mianfeimoban.com">Skis</a></li>
<li><a href="http://www.mianfeimoban.com">Ski Wear</a></li>
<li class="last"><a href="http://www.mianfeimoban.com">Goggles</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.mianfeimoban.com">Ski Schools</a></li>
<li class="last"><a href="http://www.mianfeimoban.com">Snow Report</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="http://www.mianfeimoban.com"><b>Language</b>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mianfeimoban.com">Austrian</a></li>
<li><a href="http://www.mianfeimoban.com">German</a></li>
<li><a href="http://www.mianfeimoban.com">French</a></li>
<li class="last"><a href="http://www.mianfeimoban.com">English</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.mianfeimoban.com"><b>Short Breaks</b></a></li>
</ul>
</div></div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="flyout.html"><b>Surrounding Area</b>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="inner"><div class="lineHolder">
<ul>
<li><a href="http://www.mianfeimoban.com"><b>Where to go</b></a></li>
<li><a href="http://www.mianfeimoban.com"><b>What to do</b></a></li>
<li><a href="http://www.mianfeimoban.com"><b>Places of interest</b></a></li>
<li><a href="http://www.mianfeimoban.com"><b>National parks</b></a></li>
</ul>
</div></div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="support.html"><b>Privacy</b>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="inner"></div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="last"><a href="contact.html"><b>Site Map</b>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="inner"></div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
</div>
</body>
</html>



原文地址:http://cssdh.mianfeimoban.com/cssdaohangtiao/20120307116.html
lose_ever
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 多层ul li,css中的ul li ul li ul li ul li 实现四级菜单
weixin_33477335的博客
08-03 636
a{color:Black; /*--a标签的默认颜色为黑色--*/text-decoration:none; /*--隐藏超链接的下划线--*/}a:hover{/**--当鼠标聚焦到a标签的时候文字显示为红色,当鼠标移出a标签的时候又变回原来的颜色--*/color:Red;}#div1 ul{/*--去掉文字前面的小圆点--*/list-style-type:none;}#div1 u...
纯css实现首页点击导航栏滑动展示当前页面内容
weixin_71902686的博客
05-09 370
借助 a标签里的href属性 ，在所要展示的内容区域起一个id ，通过点击a标签查找id展示，在html上用scroll-behavior: smooth;
php多重滑动门,CSS如何实现滑动门效果
weixin_27956639的博客
03-22 109
CSS实现滑动门效果主要通过设置伪元素的样式来实现，在鼠标滑过时给元素设置display:block让它显示，鼠标滑出时隐藏一个网站的导航栏对于网站来说有着举足轻重的地位,导航栏的风格也是各式各样的,纯文本的导航栏比起图像导航栏加载更加快速，但是在样式上确不及图片导航栏的美观，后来又有了滑动门导航栏的出现，加载性能好而且还美观，接下来在文章中将为大家详细介绍如何实现滑动门效果滑动门效果的特点：(1...
CSS导航菜单--三状态玻璃效果菜单（双层滑动门应用）
snowstorm的博客
04-05 2583
原文链接：http://www.cnblogs.com/zfang/archive/2011/10/13/2209635.html 本例进一步讨论背景图片制作菜单的方法，目标是实现一个具有3个状态的菜单，如图所示 三状态玻璃效果菜单 首先要准备所需的图片，本例中只是用了一张图片完成这个效果，如图所示： 现在设置HTML代码，如下所示。 Home Contact
滑动门代码，网上很流行
longxin123的专栏
09-18 2667
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">function dj(i){   for(j=1;j    {  if(i==j){   document.getElementById("a"+j).className="li2";   document.getEle
漂亮简洁滑动门代码
10-01 348
Code1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<htmlxmlns="http://www.w3.org/1999/xhtml">3<head&...
懒人原生纯css向右展开多级导航菜单代码
06-05
懒人原生纯css向右展开多级导航菜单代码
纯CSS实现的多级下拉横向导航菜单代码
01-23
纯CSS实现的多级下拉横向导航菜单代码
Tab滑动门与导航菜单JS+CSS代码
01-23
Tab滑动门与导航菜单JS+CSS代码
css3实现的多级渐变下拉菜单导航效果代码
09-24
主要为大家介绍了css3实现的多级渐变下拉菜单导航效果代码,通过纯css3技术实现圆角图形及渐变按钮的模拟效果,具有一定参考借鉴价值,需要的朋友可以参考下
打造最美CSS多级下拉横向导航菜单代码
09-24
主要告诉大家如何打造最美CSS多级下拉横向导航菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
DIV+CSS实现的滑动门菜单特效代码
10-30
带椭圆的滑动门效果代码，是竖排的效果代码，看代码是个很典型的实现效果，推荐大家学习
滑动门导航
10-18
滑动门导航，ASP编写，非常适用的代码，用于网站制作
紫云网络电视
09-26
可看很多精彩节目的网络电视.视频地址不断更新中.
鼠标移动滑动门代码
12-29
鼠标移动滑动门代码，可用于网页制作
多级滑动菜单
cf_nick的专栏
11-29 335
 网页滑出式菜单body,td,a {font-size:9pt;color:black;text-decoration:none}.normal {padding:2px}.up {padding:1px;border:#999999 1px solid;background:#cccccc}.down {padding:1px;border:dbdbdb 1px solid;backgroun
滑动（二级分类）
Jang_AnGe的博客
07-02 268
public class MainActivity extends AppCompatActivity { @BindView(R.id.viewPager) ViewPager viewPager; @BindView(R.id.radioGroup) RadioGroup radioGroup; List list = new ArrayList<>(); @Override pr...
css复合选择器
最新发布
2302_79590880的博客
04-15 457
css复合选择器整理
jQuery仿腾讯云滑动下拉导航菜单效果代码
05-13
以下是一个简单的jQuery代码，可以实现类似腾讯云的滑动下拉导航菜单效果： HTML代码： ```html 菜单 链接1 链接2 链接3 ``` CSS样式： ```css .dropdown { position: relative; display: inline-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值