CSS弹出菜单(详)

此处为HTML代码:
首先为Head区:

<title>CSS弹出菜单</title>
 <meta http-equiv="content-type" content="text/html; charset=gb2312"/>
 <link rel="stylesheet" href="css/basic.css" type="text/css"/>
  <!--[if lte IE 6]>  //用IE6浏览时,@import规则将导入ie.css,而basic.css中的规则将被部分覆盖.
   <style type="text/css">
    @import url(css/ie.css);
   </style>
  <![endif]-->

然后在body内写入如下代码:

<div id="mNav">
 <ul>
  <li><a class="hide" href="#">职业发展</a> //在ie.css中,这一条目被隐藏了,而下面在注解内的内容将被显示
   <!--[if lte IE 6]>
   <a href="#">职业发展
   <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 class="hide" href="#">首页</a>
   <!--[if lte IE 6]> //此处我曾尝试不写(因为没有子菜单),可是不写后在IE6中会矮一个像素,最后写上,解决问题!具体实现有待研究.
   <a href="#">首页
   <table>
   <tr>
    <td>
    </td>
   </tr>
   </table>
   </a>
   <![endif]-->
  </li>
 </ul>
</div>

以下为basic.css的代码,为oprea/firefox/IE7准备:

#mNav {
 font-family: arial, sans-serif; 
 width:778px;
 height: 25px; //此处不写高度时在Firefox中mNav元素高度为0,但在IE中却可以不写.
 margin:0; 
 background: #344D58;
 vertical-align: middle;
}

#mNav ul {
 padding:0; 
 margin:0;
 list-style-type: none;
}

#mNav ul li {
 float:right;
 position:relative;
}

#mNav ul li a, #mNav ul li a:visited {
 display:block; 
 text-align:center; 
 text-decoration:none; 
 width:105px;
 height:25px; 
 color:#000; 
 background: url(img/btn.jpg) #e3e3e3 top left no-repeat;
 line-height:25px; 
 font-size:11px;
}

#mNav ul li ul {
 display: none;
}

#mNav ul li:hover a {
 color:#fff; 
 background: url(img/btn_h1.jpg) #dbf6db top left no-repeat;
}

#mNav ul li:hover ul {
 display:block; 
 position:absolute; 
 top:25px; 
 left:0; 
 width:105px;
}

#mNav ul li:hover ul li a {
 display:block; 
 background: url(img/btn_h2.jpg) #DDF7DE top left no-repeat;
 color:#000;
}

#mNav ul li:hover ul li a:hover {
 background: url(img/btn_v.jpg) #F7F9EE top left no-repeat;
 color:#ddd;
}

下面就是专门为IE6准备的ie.css代码了:

table {
border-collapse:collapse;
margin:0; 
padding:0;
}

#mNav ul li a:hover {
 color:#fff;
 background: url(img/btn_h1.jpg) #dbf6db top left no-repeat;
}

#mNav ul li a.hide, #mNav ul li a:visited.hide {
 display:none;
}

#mNav ul li a:hover ul {
 display:block; 
 position:absolute; 
 top:25px; 
 left:0; 
 width:105px;
}

#mNav ul li a:hover ul li a {
 background: url(img/btn_h2.jpg) #dbf6db top left no-repeat;
 color:#000;
}

#mNav ul li a:hover ul li a:hover {
 background: url(img/btn_v.jpg) #dbf6db top left no-repeat;
 color:#ddd;
}

至此时,大功告成!!!!

　　再谈谈感受
　　其实个人感觉CSS真不难,最难的就是各种浏览器对于CSS的不同实现,往往为浏览器问题要花费你大把的时间,令你非常头痛!!!
　　对于web标准,学了也有几个月时间了,觉得很不错的,但是对于我们做网站的人而言,一个好的浏览器环境真的很重要!w3c组织应该在这方面多下功夫,努力促进各种浏览器厂商对标准的支持.
　　另外,IE6真是个很古老的浏览器,存在很多的问题,对CSS与层实现有点乱七八糟的感觉!现在IE7出来了,大家都装IE7吧!盗版的也行,下载IE7的安装程序后安装一次,会提示你通不正版验证,然后取消,把网线断了,再把C:\Documents and Settings\All Users\Application Data\Windows Genuine Advantage\data\data.dat用记事本打开,把里面的内容改成随便几个字符,然后再装就行了(一定记得断网,要不然会再次通不过验证的).