Doing a top level navigation with drop downs: have IE bugs

2023-01-05 15:25 问答作者：

So I was trying to do a top level navigation and it works pretty well across the regular browsers (it has kinks but those I can iron out).

But for whatever reason, in IE6/7 the links are placed over the dropdowns when the browser viewport shrinks. It functions in what I think is most of the other browsers, and I do not for the life of me know how to fix it. I have tried z-ordering, I have tried many many things. Any advice?

<!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">


  </script>
  <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; }

#header {
  width: 100%;
  height: 90px;
  background: #FFFFFF; }

ul#nav {
  width: 100%;
  position: relative;
  background: url(../images/partners/renew_b2b/silver_bar.png) repeat; }
  ul#nav li {
    display: inline-block;
    vertical-align: middle;
    font: normal 11px Verdana;
    list-style-type: none; }
    body.ie6 ul#nav li, body.ie7 ul#nav li {
      display: inline; }
    ul#nav li h2 {
      display: inline-block;
      vertical-align: middle;
      font: normal 11px Verdana; }
      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;
        background: green;
        height: 1%;
        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 {
    position: relative; }
  ul#nav li.mega div {
    position: absolute;
    z-index: 100;
    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: #f09; }
    ul#nav li.mega div h3 {
      display: inline;
      font: bold 13px Verdana; }
  ul#nav li.hovering div {
    display: block; }
  ul#nav img {
    position: absolute;
    z-index: -1;
    top: 50%;
    margin-top: -12px;
    left: 8px; }

#main {
  width: 100%;
  overflow: hidden;
  background: url(../images/partners/renew_b2b/sidebar_background.png) repeat-y top right; }

#content {
  float: left;
  display: inline;
  height: 300px; }

#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 #foo开发者_如何学JAVAter ul li {
        display: inline; }
      #footer ul li a {
        color: #FFF;
        text-decoration: none;
        font: normal 1.4em Verdana; }
    </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="header"></div>
  <ul id="nav">



    <li>
    <h2><a href="fixme">Link 1</a></h2>
    </li><li class="mega">

      <h2><a href="fixme">Link 2</a></h2>
      <div>
        <h3>Dropdown:</h3> 
        <p>
          <a href="fixme">Filter 1</a>,
          <a href="fixme">Filter 2</a>,
          <a href="fixme">Filter 3</a>,
          <a href="fixme">Filter 4</a>,
        </p>

      </div>
    </li><li class="mega">
      <h2><a href="fixme">Link 3</a></h2>
    <div>
        <h3>Dropdown:</h3> 
        <p>
          <a href="fixme">Filter 1</a>,
          <a href="fixme">Filter 2</a>,
          <a href="fixme">Filter 3</a>,
          <a href="fixme">Filter 4</a>,
          <a href="fixme">Filter 5</a>,
          <a href="fixme">Filter 6</a>

        </p>
      </div>
    </li><li>
      <h2><a href="fixme">Link 4</a></h2>
    </li><li class="mega">
      <h2><a href="fixme">Link 5</a></h2>
      <div>

        <h3>Filters</h3> 
        <p>
          <a href="fixme">Filter 1</a>,
          <a href="fixme">Filter 2</a>,
          <a href="fixme">Filter 3</a>
        </p>
        <h3>Filters</h3> 
        <p>

          <a href="fixme">Filter 1</a>,
          <a href="fixme">Filter 2</a>,
          <a href="fixme">Filter 3</a>
        </p>
      </div> 
    </li>
  </ul>
    <div id="main">
      <div id="content">


 </div>
      <div id="sidebar">stuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff here</div>

    </div>

  <div id="footer">
    <ul>
      <li><a href="fixme">Foter Link 2</a></li>
      <li><a href="fixme">Footer Link 1</a></li>
    </ul>
  </div>

</body>
</html>

z-index and IE<8: hours of fun!

Here are two great resources about z-index in general and IE<8 bugs in particular:

Effect of z-index value to positioned elements by Aleksandar Vacić (it gets interesting approx. on page 5 or 7)
Find out how elements stack and start using low z-index values (TJKDesign) and its handy "z-index tool"

Mozilla Dev Center: Understanding CSS z-index doesn't speak of IE bugs, obviously.

And here is a corrected code (marked with *** where I modified sth plus style attributes on li)

<!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">


  </script>
  <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; }

#header {
  width: 100%;
  height: 90px;
  background: #FFFFFF; }

ul#nav {
  width: 100%;
  position: relative;
  background: url(../images/partners/renew_b2b/silver_bar.png) repeat; }
  ul#nav li {
    display: inline-block;
    vertical-align: middle;
    font: normal 11px Verdana;
    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;
      font: normal 11px Verdana; }
      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;
        background: green;
        height: 1%;
        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 {
    /*position: relative;*** */ }
  ul#nav li.mega div {
    position: absolute;
    z-index: 100;
    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: #f09; }
    ul#nav li.mega div h3 {
      display: inline;
      font: bold 13px Verdana; }
  ul#nav li.hovering div {
    display: block; }
  ul#nav img {
    position: absolute;
    z-index: -1;
    top: 50%;
    margin-top: -12px;
    left: 8px; }

#main {
  width: 100%;
  overflow: hidden;
  background: url(../images/partners/renew_b2b/sidebar_background.png) repeat-y top right; }

#content {
  float: left;
  display: inline;
  height: 300px; }

#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; }
    </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="header"></div>
  <ul id="nav">



    <li style="z-index:60;">
    <h2><a href="fixme">Link 1</a></h2>
    </li><li class="mega" style="z-index:50;">

      <h2><a href="fixme">Link 2</a></h2>
      <div>
        <h3>Dropdown:</h3> 
        <p>
          <a href="fixme">Filter 1</a>,
          <a href="fixme">Filter 2</a>,
          <a href="fixme">Filter 3</a>,
          <a href="fixme">Filter 4</a>,
        </p>

      </div>
    </li><li class="mega" style="z-index:40;">
      <h2><a href="fixme">Link 3</a></h2>
    <div>
        <h3>Dropdown:</h3> 
        <p>
          <a href="fixme">Filter 1</a>,
          <a href="fixme">Filter 2</a>,
          <a href="fixme">Filter 3</a>,
          <a href="fixme">Filter 4</a>,
          <a href="fixme">Filter 5</a>,
          <a href="fixme">Filter 6</a>

        </p>
      </div>
    </li><li style="z-index:30;">
      <h2><a href="fixme">Link 4</a></h2>
    </li><li class="mega" style="z-index:20;">
      <h2><a href="fixme">Link 5</a></h2>
      <div>

        <h3>Filters</h3> 
        <p>
          <a href="fixme">Filter 1</a>,
          <a href="fixme">Filter 2</a>,
          <a href="fixme">Filter 3</a>
        </p>
        <h3>Filters</h3> 
        <p>

          <a href="fixme">Filter 1</a>,
          <a href="fixme">Filter 2</a>,
          <a href="fixme">Filter 3</a>
        </p>
      </div> 
    </li>
  </ul>
    <div id="main">
      <div id="content">


 </div>
      <div id="sidebar">stuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff here</div>

    </div>

  <div id="footer">
    <ul>
      <li><a href="fixme">Foter Link 2</a></li>
      <li><a href="fixme">Footer Link 1</a></li>
    </ul>
  </div>

</body>
</html>

In short: relative positioning of every li and not only li.mega ones; z-index on each one from a high value to a low one. You already have a z-index: 100; on div

继续阅读：css internet-explorer-6

Doing a top level navigation with drop downs: have IE bugs

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？