Question

菜单（导航）的发布代码适用于Google Chrome，IE9，Safari。

但它拒绝在IE8中工作。我找不到原因......

任何提示都表示赞赏！

HTML：

<code>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang=nl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="ts.css" rel="stylesheet" type="text/css">
<!--[if IE]><link rel="stylesheet" href="css/adp_ie.css"><![endif]-->


</head>

<body>

<div id="wrapper">
  <div id="header">
    <div id="top">
      <div id="streep">

  </div>
  <div id="logo">

  </div>
  <div id="fijnstreep">

  </div>
  <nav id="full">
    <ul id="menu">
      <li><a href="">ITEM 1</a>
        <ul class="sub-menu">
          <li>
            <a href="">SUB 1 ITEM 1</a>
          </li>
          <li>
            <a href="">SUB 1 ITEM 2</a>
          </li>
          <li>
            <a href="">SUB 1 ITEM 3</a>
          </li>                
          <li>
            <a href="">SUB 1 ITEM 4</a>
          </li>      
          <li>
            <a href="">SUB 1 ITEM 5</a>
          </li>
          <li>
            <a href="">SUB 1 ITEM 6</a>
          </li>
          <li class="laatste">
            <a href="">SUB 1 ITEM 7</a>
          </li>
        </ul>
      </li>
</ul>
  </nav>
</div> <!-- top -->

<div id="headerimg">

</div><!-- headerimg -->
</div> <!-- header -->
 <div id="content">
 <p class="small">
 </p>
 </div>
</div> <!-- wrapper -->

</body>
</html>

</code>

CSS：

    nav#full{
        float:center;

    }

    nav#full ul{
        margin-left:20px;
        margin-top:10px;
    }

    nav#full ul li{
        display:inline-block;
        border-right:1px solid #4c5474;
        margin-right:6px;
        padding-right:8px;
        font-size:1em;
    }

        nav#full ul li.laatste{
            border-right:none;
            margin-right:0;
            padding-right:0;
        }

    nav#full ul li a, nav#lang ul li a{
        font-family: 'Open Sans Condensed', sans-serif;
        color:#3a3628;
        font-weight:300;
        text-decoration:none;
        padding-bottom:17px;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

            nav#full ul li a:hover, nav#lang ul li a:hover{
                color:#a30606;
                color: rgba(163, 6, 6, 1);
            }

            nav#full ul li a.actief{
                color:#a30606;
                color: rgba(163, 6, 6, 1);
            }


            ul#menu ul.sub-menu li {
                list-style-type: none;
                display: block;
                border:0;
                margin:10px;
                padding-bottom:10px;
                text-align:center;
                border-bottom:1px solid #948e75;
            }

                    ul#menu ul.sub-menu li.laatste {
                        list-style-type: none;
                        display: block;
                        border:0;
                        margin:10px;
                        padding-bottom:0;
                        text-align:center;
                        border-bottom:none;
                    }

            ul#menu li ul.sub-menu {
                background-color:#4C5474;
                display:none;
                position: absolute;
                top: 225px;
                width: 190px;
                margin-left:0;
            }

            ul#menu li ul.sub-menu li a{
                font-family: 'Open Sans Condensed', sans-serif;
                color:#fff;
                font-weight:300;
                text-decoration:none;
                padding-bottom:0;
            }

            ul#menu li:hover ul.sub-menu {
                display:block;
            }

    nav#lang{
        float:right;
    }

            nav#lang ul{
                margin-right:10px;
                margin-top:12px;
            }

            nav#lang ul li{
                display:inline-block;
                border-right:1px solid #746c4c;
                margin-right:3px;
                padding-right:6px;
                font-size:1em;
            }

            nav#lang ul li.laatste{
                border-right:none;
                margin-right:0;
                padding-right:0;
            }


</code>

问题实际上与IE8有关......

提前致谢

Answer 1

使用ul#menu li ul.sub-menu选择器

的以下规则

ul#menu li ul.sub-menu {
    background-color:#4C5474;
    display:none;
    position: absolute;
    top: 0px;
    width: 190px;
    margin:40px auto auto 0;
}

菜单在IE8上无法正常工作

1 个答案: