在做导航菜单设计制作的时候，很常见的有下拉列表式菜单。如下图效果，但是这种下拉菜单一般都是使用JavaScript + Css联合打造，下面讲一种不使用JavaScript一样能做出的方法。[css hack drop down list navigation menu]
img如图，鼠标移到主菜单上，显示下拉列表，鼠标移开，则下拉菜单隐藏。
先把HTMLCode贴出来再慢慢分析讲解，Dom代码如下：
CssHackMenuCode
<div class="menu">
<ul class="feeul">
<li class="liimg"><a href="../default.html">首页</a></li>
<li class="liimg">
<a class="hide" href="../aboutus.html">关于我们</a>
<!--[if lte IE 6]>
<a href="../aboutus.html">关于我们
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../aboutus.html">麦格简介</a></li>
<li><a href="../team.html">技术团队</a></li>
<li><a href="../hr.html">人才招聘</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li class="liimg">
<a class="hide" href="../fang-e-yi-dian-ji.html">防恶意点击</a>
<!--[if lte IE 6]>
<a href="../fang-e-yi-dian-ji.html">防恶意点击
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../fang-e-yi-dian-ji-xi-tong.html">产品概述</a></li>
<li><a href="../domo.html">在线演示</a></li>
<li><a href="../faq.html">常见问题</a></li>
<li><a href="../free-trial.html">免费试用</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li class="liimg">
<a class="hide" href="../wang-luo-ying-xiao.html">网络营销</a>
<!--[if lte IE 6]>
<a href="../wang-luo-ying-xiao.html">网络营销
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../jing-jia-pai-ming.html">竞价排名</a></li>
<li><a href="../wang-luo-tui-guang.html">网络推广</a></li>
<li><a href="../wang-zhan-you-hua.html">网站优化</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li class="liimg"><a href="../news.html">新闻动态</a></li>
<li class="liimg">
<a class="hide" href="../cooperation.html">合作代理</a>
<!--[if lte IE 6]>
<a href="../he-zuo-dai-li.html">合作代理
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../approaches.html">合作方式</a></li>
<li><a href="../do.html">代理资质</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li class="liimg">
<a href="../ms.html">客户咨询</a>
</li>
<li class="liimg">
<a class="hide" href="../contact.html">联系我们</a>
<!--[if lte IE 6]>
<a href="../contact.html">联系我们
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../call.html">联系方式</a></li>
<li><a href="../pay.html">汇款方式</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div可以看到，在HTML代码中使用了IE选择符。
<!--[if lte IE 6]>
<a href="../wang-luo-ying-xiao.html">网络营销
<table><tr><td>
<![endif]-->
关于<!--[if lte IE 6]> <![endif]-->标记的详细说明请看前一篇随笔，有详细说明，在这里就简单说一下，if lte IE6 的意思是只有IE6和IE以下的IE版本浏览器可见。这是IE特有属性，其他浏览器看不到。（也只有IE6需要hack一下，不然这个代码就perfect 了）
在由于要区分IE6以及IE6一下版本浏览器，和现在的主流浏览器，所系我们需要用到两个css。
<link href="css/ulmenu.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="css/ulmenu2.css" rel="stylesheet" type="text/css" />
<![endif]-->
这连个css引用要写在页面<head></head>之间，并且顺序为ulmenu.css在上，IE6及以下能识别的ulmenu2.css在下面，为了的是大部分浏览器只需要读取ulmenu.css即可，IE6及以下浏览器才需要读取ulmenu2.css >
ulmenu.css Code
.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;
ulmenu2.css Code
@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，嘿嘿 ）。
