Doing a top level navigation with drop downs: have IE bugs pt.2_问答_开发者

Sample cod开发者_StackOverflow中文版e is below. If you look at it, you will see gray drop down boxes. These boxes are present in all browsers, but don't show in IE6 / IE7. Is there anyway to get this working in those browsers, without removing styles critical to the layout (for instance, I think removing a overflow: hidden off of something gets it to work but breaks the entire thing in IE6/IE7):

http://jsbin.com/ohufu4/edit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">



  <title>Title</title>
    <style type="text/css">

/* RESET ------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0; }

body {
  font-size: 62.5%; }

/* END OF RESET ------------------------------ */
a img {
  border: none;
  display: none; }

h1 {
  font-weight: bold;
  font-size: 19px;
  color: #333;
  margin-bottom: 20px; }

h2 {
  margin: 10px 0;
  font: bold 13px Verdana;
  color: #333; }

html, body {
  height: 100%; }

body {
  font-family: Verdana; }

#header {
  width: 100%;
  height: 60px;
  padding: 15px 0;
  background: #FFFFFF; }

#header_nest {
  float: right;
  margin-right: 5%; }
  #header_nest img {
    display: inline-block;
    vertical-align: middle; }
    body.ie6 #header_nest img, body.ie7 #header_nest img {
      display: inline; }
  #header_nest p {
    font: normal 10px Verdana;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 0 25px 0 15px; }
    body.ie6 #header_nest p, body.ie7 #header_nest p {
      display: inline; }

ul#nav {
  padding: 0 0 0 20px;
  position: relative; }
  ul#nav li {
    display: inline-block;
    vertical-align: middle;
    font: normal 11px Verdana, sans-serif;
    list-style-type: none;
    position: relative; }
    body.ie6 ul#nav li, body.ie7 ul#nav li {
      display: inline; }
    ul#nav li h2 {
      display: inline-block;
      vertical-align: middle;
      z-index: -1;
      margin: 0;
      font: normal 11px Verdana, sans-serif; }
      body.ie6 ul#nav li h2, body.ie7 ul#nav li h2 {
        display: inline; }
      ul#nav li h2 a {
        display: inline-block;
        vertical-align: middle;
        z-index: 4;
        text-decoration: none;
        position: relative;
        color: #999;
        padding: 20px 10px 20px 40px;
        white-space: nowrap; }
        body.ie6 ul#nav li h2 a, body.ie7 ul#nav li h2 a {
          display: inline; }
  ul#nav li.mega {
    z-index: 30; }
  ul#nav li.mega div {
    position: absolute;
    z-index: 200;
    padding: 10px;
    border-left: 1px solid #999;
    border-right: 3px solid #999;
    border-bottom: 2px solid #999;
    top: 52px;
    left: 0;
    margin-right: 40px;
    background: #CCC;
    /* commenting out for test case: display: none;  */ }
    ul#nav li.mega div h3 {
      display: inline;
      font: bold 13px Verdana, sans-serif; }
  ul#nav li.hovering div {
    display: block; }
  ul#nav img {
    position: absolute;
    z-index: -1;
    top: 50%;
    margin-top: -12px;
    left: 8px; }

#main {
  padding-right: 300px; }

#content {
  float: left;
  display: inline; }

body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  background: #fff;
  /* Minimum width remove line if not required (does not work in IE) */ }

/* column container */
.colmask {
  position: relative;
  /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
  clear: both;
  float: left;
  width: 100%;
  /* width of whole page */
  overflow: hidden;
  /* This chops off any overhanging divs */ }

/* 2 column right menu settings */
.rightmenu {
  /* display: none; */ }

.rightmenu .colleft {
  float: left;
  width: 200%;
  margin-left: -200px;
  position: relative;
  right: 100%;
  background: #fff; }

.rightmenu .col1wrap {
  float: left;
  width: 50%;
  position: relative;
  left: 50%;
  padding-bottom: 1em; }

.rightmenu .col1 {
  margin: 50px 55px 0 245px;
  /* removed temporarily: overflow:auto; */
  padding-bottom: 20px; }

.rightmenu .col2 {
  float: right;
  width: 180px;
  position: relative;
  left: 195px; }
  .rightmenu .col2 h3 {
    display: inline-block;
    color: #FFFFF;
    margin-left: -9px;
    padding: 10px 9px;
    background-color: #5D973A;
    cursor: pointer;
    width: 100%;
    color: #EEEEEE; }
    body.ie6 .rightmenu .col2 h3, body.ie7 .rightmenu .col2 h3 {
      display: inline; }

#sidebar {
  width: 200px;
  color: black;
  float: right;
  display: inline;
  height: 300px; }

#footer {
  width: 100%;
  clear: both;
  background: #333; }
  #footer ul {
    display: inline-block;
    margin: 30px; }
    body.ie6 #footer ul, body.ie7 #footer ul {
      display: inline; }
    #footer ul li {
      display: inline-block;
      list-style-type: none;
      margin: 0 9px; }
      body.ie6 #footer ul li, body.ie7 #footer ul li {
        display: inline; }
      #footer ul li a {
        color: #FFF;
        text-decoration: none;
        font: normal 1.4em Verdana, sans-serif; }

.dataset {
  display: none;
  overflow: auto;
  width: 100%;
  font: normal 13px Verdana, sans-serif;
  border-collapse: collapse;
  margin: 0 0 0 0; 
  height: 200px;
}

.dataTables_wrapper {
  margin: 0 0 40px 0; }

.dataset td {
  padding: 3px 10px; }

.dataset th {
  font: bold 10px Verdana, sans-serif;
  text-align: left;
  padding: 7px 3px 4px 10px; }

.dataTables_filter {
  margin: 8px;
  float: right; }

.dataTables_length {
  margin: 8px;
  float: left; }

.dataTables_info {
  margin: 8px;
  float: left; }

.dataTables_paginate {
  margin: 8px;
  float: right; }
  .dataTables_paginate .ui-state-default {
    padding: 2px; }

/* environmental impact styles */
#pg_environmental-impact .dataset tr.odd, #pg_reporting .dataset tr.odd {
  background-color: #DDFFDD; }
#pg_environmental-impact .dataset tr.odd td:first-child, #pg_reporting .dataset tr.odd td:first-child {
  background-color: #C4FFC4; }
#pg_environmental-impact .dataset tr.even td:first-child, #pg_reporting .dataset tr.even td:first-child {
  background-color: #D5FFD5; }

.grp_dash .dataTables_scrollBody {
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC; }

/* end environmental impact styles */
/* Login Styles */
#pg_login {
  background-color: #F5F5F5;
  width: 100%;
  height: 100%; }
  #pg_login #login_nested {
    height: 200px;
    width: 298px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
    left: 50%;
    margin-left: -150px;
    text-align: right;
    font: normal 12px Verdana, sans-serif; }
    #pg_login #login_nested img {
      text-align: right;
      margin: 19px 39px 0 0; }
    #pg_login #login_nested form {
      margin-top: -10px;
      text-align: left;
      padding: 0 39px 30px; }
    #pg_login #login_nested input#submit {
      display: inline-block;
      background-color: #808080;
      color: white;
      border: none;
      padding: 10px;
      font-size: 12px;
      width: 100%;
      border-bottom: 1px solid #666;
      border-left: 1px solid #777; }
      body.ie6 #pg_login #login_nested input#submit, body.ie7 #pg_login #login_nested input#submit {
        display: inline; }
    #pg_login #login_nested ul.errorlist {
      color: red;
      margin: 5px 0; }
      #pg_login #login_nested ul.errorlist li {
        list-style-type: none;
        font: normal 10px Verdana, sans-serif; }
    #pg_login #login_nested #id_username, #pg_login #login_nested #id_password, #pg_login #login_nested .placeholder {
      padding: 7px 6px;
      margin: 3px 0px;
      width: 206px;
      position: relative;
      display: block; }
    #pg_login #login_nested .placeholder {
      color: #999; }

.grp_dash .highlights {
  display: inline-block;
  margin: 0 15px 10px 15px; }
  body.ie6 .grp_dash .highlights, body.ie7 .grp_dash .highlights {
    display: inline; }
  .grp_dash .highlights p {
    display: inline-block;
    font: normal 12px Verdana;
    text-align: center;
    margin: 0 25px 15px 0; }
    body.ie6 .grp_dash .highlights p, body.ie7 .grp_dash .highlights p {
      display: inline; }
    .grp_dash .highlights p strong {
      display: block;
      font: bold 14px Verdana; }

/* filterable pages */
#pg_reporting form fieldset, #pg_environmental-impact form fieldset {
  display: none;
  border: none; }
  #pg_reporting form fieldset ul li, #pg_environmental-impact form fieldset ul li {
    list-style-type: none; }
    #pg_reporting form fieldset ul li label, #pg_environmental-impact form fieldset ul li label {
      display: inline; }

form label {
  /* display: block; */ }

/* export module */
#export_module {
  margin-bottom: 15px;
  margin-top: -10px;
  display: none; }


</style>

</head>


<!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->

<!--[if lte IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->
<div id="pg_environmental-impact" class="">
  <div id="header">
    <div id="header_nest">

      <p>Hello, <strong>User</strong><br /> 

<a href="/help/contact/">Get Help</a> |


  <a href="/logout/">Logout</a></p>

      </div>
  </div>
  <ul id="nav">


<li class="mega">
  <h2><a href="/">Blah</a></h2></li>


    <li class="mega" style="z-index: 40;">
        <h2><a href="#">Environmental Impact</a></h2>

        <div>
            <h3>Blah:</h3> 
            <p>
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>
            </p>

        </div>
    </li>



    <li class="mega">
        <h2><a href="#">Blah</a></h2>
        <div>
            <h3>Blah</h3> 
            <p>

                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>,
                <a href="#">Blah</a>
            </p>
        </div>

    </li>


    <li>
        <h2><a href="#">Blah</a></h2>
    </li>

    <li class="mega">
        <h2><a href="#">Blah</a></h2>

        <div>
            <h3>Blah</h3> 
            <p>

                <a href="#">Blah</a>,


                <a href="#">Blah</a>

            </p>
            <h3>Miscellaneous</h3> 
            <p>

                <a href="#">Blah</a>

            </p>
        </div> 
    </li>

  </ul>

  <div class="colmask rightmenu">
    <div class="colleft">

      <div class="col1wrap">
        <div class="col1">


            <h1>Page Title</h1>



<table class="dataset">


</table>


        </div>
      </div>
      <div class="col2">
        <!-- Column 2 start -->


<h2>More filters</h2>
<p>
<a href="#">Blah</a>
<a href="#">Blah</a>
<a href="#">Blah</a>

<a href="#">Blah</a>

</p>


<h2>Filter...</h2>








        <!-- Column 2 end -->
      </div>
    </div>
  </div>


  <div id="footer">
    <ul>

    </ul>
  </div>
</div>


</body>
</html>

EDIT: yeah all the styles have to be in the same file, and that conditional is the best way to target it. I have that code in production and it works fairly well. I know it isn't ideal but it's better than anything else I can think of doing.

EDIT: I did HEAVY stripping of all of our business logic from this code. There are a lot of elements, styling, and javascript I stripped out. How it is supposed to work, is when you hover over the navigation elements, the gray dropdowns appear. For troubleshooting this problem, I removed the display: none; from those elements and now I am simply trying to get them to appear.

I'm not sure exactly what I did, but the problem was fixed by the time I asked this question:

Why does IE show the gray boxes below the content, instead of above?

The code is therein.