另一个IE8打破了CSS下拉列表

时间:2013-07-04 05:58:32

标签: html css css3 internet-explorer-8

这是一个动态的pyrcocms网站,所以用jsfiddle发布效果不太好。该菜单适用于所有当前主流浏览器和版本。 ie7当然不起作用,但我不支持它。 IE8不会显示任何菜单,只显示列表和子列表。我有什么不对?

CSS:

nav ul#head-nav 
{ 
    width: 700px;
    height: 35px; 
    float:right;
    position:relative;
    margin:10px 0 0 0;
    padding-top:10px;
    bottom:90px; 

}
nav ul#head-nav ul 
{ 
    position: absolute;
    left:-30px;
    top:26px;
    visibility: hidden; 
    z-index: 1000; 
}

nav ul#head-nav li 
{ 
    font-family:Lato;
    font-weight:700;
    font-variant:small-caps;
    background: url('../img/body-bg.jpg') top left repeat; 
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    moz-border-top-left-radius:5px;
    moz-border-top-right-radius:5px;    
    position: relative;
    height:30px; 
    list-style: none; 
    padding-top:10px;
    margin-left:1.5px;
    margin-right:1.5px;
    float: left; 
    text-align:center;
    min-width:115px;
}
nav ul#head-nav .first
{ 
    min-width:90px;
}
nav ul#head-nav li:hover
{ 
background:#5a81a0;
}

nav ul#head-nav li a, ul#head-nav li a:visited
{ 
    font-size: 16px;
    color: white;
    text-decoration:none;
}
nav ul#head-nav li a:hover, ul#head-nav a:visited:hover 
{ 
    color: #ff6900; 
    text-decoration: none; 
}

/* Header Menu second level */
nav ul#head-nav li:hover ul 
{ 
    visibility: visible; 
}
nav ul#head-nav ul li 
{ 
    min-height:20px;
    height:auto;
    width:200px;
    display: table-cell;
    vertical-align: middle;
    border-radius:0px;
    border: 1px solid #e9e9e9; 
    padding: 3px; 
    background: #d8d8d8; 

}
nav ul#head-nav ul li:hover 
{ 
    background:#5a81a0; 
    visibility: visible; 
}

/* Header Menu third level */
nav ul#head-nav ul ul li 
{ 
    visibility: hidden; 
}
nav ul#head-nav ul li:hover ul li 
{ 
    visibility: visible; 
}
nav ul#head-nav ul ul 
{ 
    left:177px; 
    top:-15px;  
    padding-top: 0; 
}

和HTML:

<nav>
        <ul id="head-nav">
          <li class="first current"><a href="http://127.0.0.1/home">Home</a></li>
          <li class="has_children"><a href="http://127.0.0.1/about-us">About Us</a>
            <ul class="dropdown">
              <li class="first"><a href="http://127.0.0.1/about-us/who-is-who">Who is Who</a></li>
              <li><a href="http://127.0.0.1/about-us/bylaws">Bylaws</a></li>
              <li><a href="http://127.0.0.1/blog">Blog</a></li>
              <li><a href="http://127.0.0.1/about-us/meetings">Meetings</a></li>
              <li><a href="http://127.0.0.1/about-us/trustees">Trustees</a></li>
              <li><a href="http://127.0.0.1/about-us/history">History</a></li>
              <li><a href="http://127.0.0.1/about-us/intergovernmental-agreement">Intergovernmental Agreement</a></li>
              <li><a href="http://127.0.0.1/about-us/staff">Staff</a></li>
              <li class="last"><a href="http://127.0.0.1/about-us/contact-us">Contact Us</a></li>
            </ul>
          </li>
          <li class="has_children"><a href="http://127.0.0.1/benefits">Benefits</a>
            <ul class="dropdown">
              <li class="first"><a href="http://127.0.0.1/benefits/faqs">FAQs</a></li>
              <li><a href="http://127.0.0.1/benefits/benefit-eligibility">Benefit Eligibility</a></li>
              <li><a href="http://127.0.0.1/benefits/how-to-file-an-appeal">How to File An Appeal</a></li>
              <li><a href="http://127.0.0.1/benefits/benefit-disqualifiers">Benefit Disqualifiers</a></li>
              <li><a href="http://127.0.0.1/benefits/employee-development">Employee Development</a></li>
              <li><a href="http://127.0.0.1/benefits/premium-calculation">Premium Calculation</a></li>
              <li><a href="http://127.0.0.1/benefits/premiums">Premiums</a></li>
              <li class="last"><a href="http://127.0.0.1/benefits/unemployment-information">Unemployment Information</a></li>
            </ul>
          </li>
          <li class="has_children"><a href="http://127.0.0.1/eap">EAP</a>
            <ul class="dropdown">
              <li class="first has_children"><a href="http://127.0.0.1/eap/appreciation-packet-guides">Appreciation Packet Guides</a>
                <ul class="dropdown">
                  <li class="first"><a href="http://127.0.0.1/eap/appreciation-packets/custodians">Custodians</a></li>
                  <li><a href="http://127.0.0.1/eap/appreciation-packets/food-service-personnel">Food Service Personnel</a></li>
                  <li><a href="http://127.0.0.1/eap/appreciation-packets/principals">Principals</a></li>
                  <li><a href="http://127.0.0.1/eap/appreciation-packets/teachers">Teachers</a></li>
                  <li><a href="http://127.0.0.1/eap/appreciation-packets/bus-drivers">Bus Drivers</a></li>
                  <li><a href="http://127.0.0.1/eap/appreciation-packets/superintendents">Superintendents</a></li>
                  <li class="last"><a href="http://127.0.0.1/eap/appreciation-packets/support-staff">Support Staff</a></li>
                </ul>
              </li>
              <li><a href="http://127.0.0.1/eap/difference-makers">Difference Makers</a></li>
              <li><a href="http://127.0.0.1/eap/writing-competition">Writing Competition</a></li>
              <li><a href="http://127.0.0.1/eap/awards-programs">Awards Programs</a></li>
              <li class="last"><a href="http://127.0.0.1/eap/appreciation-packets">Appreciation Packets</a></li>
            </ul>
          </li>
          <li class="has_children"><a href="http://127.0.0.1/library">Library</a>
            <ul class="dropdown">
              <li class="first"><a href="http://127.0.0.1/library/videos">Videos</a></li>
              <li><a href="http://127.0.0.1/library/stories">Stories</a></li>
              <li class="last"><a href="http://127.0.0.1/library/links">Links</a></li>
            </ul>
          </li>
          <li class="last has_children"><a href="http://127.0.0.1/news">News</a>
            <ul class="dropdown">
              <li class="first"><a href="http://127.0.0.1/news/news-u-trust">News U Trust</a></li>
              <li><a href="http://127.0.0.1/news/connections-newsletter">Connections Newsletter</a></li>
              <li><a href="http://127.0.0.1/news/news-releases">News Releases</a></li>
              <li class="last"><a href="http://127.0.0.1/news/trustee-notes">Trustee Notes</a></li>
            </ul>
          </li>
        </ul>
      </nav>

1 个答案:

答案 0 :(得分:1)

尝试将其放入HEAD标记

<meta http-equiv="X-UA-Compatible" content="IE=100" >

当发生这种情况时 - 转到工具 - &gt;兼容模式 ;并确保它已关闭。我有类似的问题,并切换它使我的菜单正常工作(它根本不工作)。