Css Hack打造JavaScript效果的下拉菜单（IE6/7/8/FF/Safari）-控件新闻-慧都网

Css Hack打造JavaScript效果的下拉菜单（IE6/7/8/FF/Safari）

原创|其它|编辑：郝浩|2009-07-27 11:37:34.000|阅读 1475 次

概述：在做导航菜单设计制作的时候，很常见的有下拉列表式菜单。如下图效果，但是这种下拉菜单一般都是使用JavaScript + Css联合打造，下面讲一种不使用JavaScript一样能做出的方法。[css hack drop down list navigation menu]

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

在做导航菜单设计制作的时候，很常见的有下拉列表式菜单。如下图效果，但是这种下拉菜单一般都是使用JavaScript + Css联合打造，下面讲一种不使用JavaScript一样能做出的方法。[css hack drop down list navigation menu]

img如图，鼠标移到主菜单上，显示下拉列表，鼠标移开，则下拉菜单隐藏。

先把HTMLCode贴出来再慢慢分析讲解，Dom代码如下：

CssHackMenuCode

可以看到，在HTML代码中使用了IE选择符。

关于标记的详细说明请看前一篇随笔，有详细说明，在这里就简单说一下，if lte IE6 的意思是只有IE6和IE以下的IE版本浏览器可见。这是IE特有属性，其他浏览器看不到。（也只有IE6需要hack一下，不然这个代码就perfect 了）

在由于要区分IE6以及IE6一下版本浏览器，和现在的主流浏览器，所系我们需要用到两个css。

这连个css引用要写在页面<head></head>之间，并且顺序为ulmenu.css在上，IE6及以下能识别的ulmenu2.css在下面，为了的是大部分浏览器只需要读取ulmenu.css即可，IE6及以下浏览器才需要读取ulmenu2.css >

.menu
{
    width:960px;
    background-color:#008AD2;
    background-image:url(../img/menubg.jpg);
    background-position:left center;
    background-repeat:repeat-y;
    height:28px;
    overflow:visible;
    display:block;  }

.liimg
{
    background:url(../img/menufg0.gif) no-repeat right 4px; }

.feeul, .feeul a {color:#FFFFFF;font-size:12px;line-height:15px;}
.feeul a:hover {color:#FFFF00;text-decoration:none;}

.menu ul {
    display:block;
    list-style-type:none;
    margin:0;
    overflow:visible;
    padding:2px 0 0;
}

.menu ul li {
    float:left;
    position:relative;
}

.menu ul li a {
    display:block;
    float:left;
    height:23px;
    padding-left:20px;
    padding-right:21px;
    padding-top:4px;
    text-align:center;
    width:60px;
}

.menu ul li ul {
    display:none;
}

.menu ul li:hover a {
    color:#FFFFFF;
}

.menu ul li a:hover {
    color:#FFFF00;
}

.menu ul li:hover ul {
    background-image:url(../img/submenubg.png);
    background-repeat:repeat;
    display:block;
    left:0;
    position:absolute;
    top:27px;
    width:100px;
    z-index:99;
}

.menu ul li:hover ul li a {
    background-image:none;
    border-bottom:1px solid #A8BCD2;
    color:#FFFFFF;
    display:block;
    overflow:hidden;
    width:60px;
    z-index:99;
}

.menu ul li:hover ul li a:hover {
    color:#FFFF00;

@charset "utf-8";
/* CSS Document  */

/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */

/* Get rid of any default table style */
table {
    border-collapse:collapse;
    margin:0;
    padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, #menu ul li a:visited.hide {
    display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
    color:#ffff00;
    background:transparent;
    background-image: url(../img/blank.gif);
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
    display:block;
    position:absolute;
    top:25px;
    left:0;
    width:105px;
}

/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://fee.magnfee.com/img/submenubg.png");
    color:#fff;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #d7e2ef;
    position: relative;
    cursor:hand;
}

/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
    color:#FFFF00;
    position: relative;
    cursor:hand;

经测试。IETest测试，兼容IE6.7.8.FF.Safari.

代码中所需配图，提供Demo下载（明天整理之后再修改，本例可以参看网站 http://fee.magnfee.com 导航菜单，技术贴，请勿讨论网站内容，仅仅探讨相关技术。QQ：31-52-6加时去掉横杠，注明cnblogs，嘿嘿）。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：博客园

上一篇：J2ME手机开发中怎么将图片处理成透明下一篇：C#实现屏幕录像