下拉CSS NAV在IE 9中不会呈现

时间:2016-07-27 18:17:40

标签: html css drop-down-menu navigation internet-explorer-9

这是我的测试页。

http://mymsaa.org/test_ie9.php

我刚才注意到这个页面没有"渲染"正确地在IE 9中。

我没有使用IE 9,因此我使用此网站预览我的测试页 - http://netrenderer.com

这是我的CSS& HTML。

任何帮助都将不胜感激。

<style type="text/css">

/*NAVIGATION*//*NAVIGATION*//*NAVIGATION*/
.about_msaa_nav { margin-left: -67px; }

.ms_button { min-width: 172px !important; max-width: 172px; }

.how_button { min-width: 219px !important; max-width: 219px; }

.living_button { min-width: 168px !important; max-width: 168px; }

.donate_button { min-width: 118px !important; max-width: 118px; }

.get_button { min-width: 151px !important; max-width: 151px; }

.swim_button { min-width: 154px !important; max-width: 154px; }

.about_button { min-width: 157px !important; max-width: 157px; border-right: 0px white solid !important; }


#container {
margin: 0 auto;
max-width: 1200px; }

#hide_nav { display: none; }

.toggle, [id^=drop] {
 display: none; }

nav {
margin: 0;
padding: 0; }

nav:after {

content: "";    display: table;    clear: both; }

nav ul {

float: left;    padding: 0;    margin: 0;    list-style: none;    position: relative;      }

nav ul li {
margin: 0px;    display: inline-block;    float: left; 

}
nav li a { 
display: block;
padding-top: 8px; padding-bottom: 8px; text-align: center;
color: #FFF !important;
font-size: 17px;
background-color: #0c579f;
text-decoration: none; font-weight:normal !important; 
border-right: 1px solid white; 
border-bottom: 1px solid white; }

nav ul li ul li:hover { background: #ef3e42; }

nav li a:hover { background-color: #ef3e42;    }

nav li li a {
border-right: 0px solid white;    
font-size: 13px; text-align: left; padding-left: 23px; padding-right: 23px;
display: block;
background: #0255a1;
position: relative;
z-index:200;
border-bottom: 1px solid white;
color: white; text-decoration: none; font-weight:normal !important; }



nav li li li a {
background: #c3e0e8;
z-index:200; color: black !important; }

nav li li li a:hover {
color: white !important; }

nav ul ul {
display: none;
position: absolute; }

nav ul li:hover > ul { display: inherit; }
nav ul ul li {
width: 225px;
float: none;
display: list-item;
position: relative;
}

nav ul ul ul li {
position: relative;
top: -38px;
left: 225px;
}

li > a:after { content: ' '; }
li > a:only-child:after { content: ''; }

/* Media Queries

--------------------------------------------- */
@media all and (max-width : 992px) {

#logo {

display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;

}
nav { margin: 0; }
.toggle + a,

 .menu { display: none; }
.toggle {
display: block;
padding: 8px 24px;
color: #FFF !important;
font-size: 17px;
background-color: #0c579f;
text-decoration: none; font-weight:normal !important; margin-bottom: -0px;}

.toggle:hover { background-color: #ef3e42; }

[id^=drop]:checked + ul { display: block; }
nav ul li {
display: block;
width: 100%; }

nav ul ul     .toggle,
nav ul ul a {    }
nav ul ul ul a {    }

nav ul ul ul a { 
border-right: 0px solid white;    
font-size: 13px;
display: block;
background: #ef3e42;
position: relative;
z-index:200;
border-bottom: 1px solid white;
color: white; text-decoration: none; font-weight:normal !important;    }

nav ul li ul li     .toggle,
nav ul ul a { 
border-right: 0px solid white;    
font-size: 13px;
display: block;
background: #0c579f;
position: relative;
z-index:200;
border-bottom: 1px solid white;
color: white; text-decoration: none; font-weight:normal !important; }

nav ul ul {
float: none;
position: static;
color: #ffffff; }

nav ul ul li:hover > ul,

nav ul li:hover > ul { display: none; }
nav ul ul li {
display: block;
width: 100%; }

nav ul ul ul li { position: static;
}

}
@media all and (max-width : 330px) {
nav ul li {
display: block;    width: 100%;

}

}


/*992px*//*992px*//*992px*//*992px*/

@media only screen and (min-width: 992px) and (max-width: 1200px) {

.about_msaa_nav { margin-left: -98px; }

.ms_button { min-width: 143px !important; max-width: 143px; }

.how_button { min-width: 188px !important; max-width: 188px; }

.living_button { min-width: 139px !important; max-width: 139px; }

.donate_button { min-width: 92px !important; max-width: 92px; }

.get_button { min-width: 125px !important; max-width: 125px; }

.swim_button { min-width: 126px !important; max-width: 126px; }

.about_button { min-width: 126px !important; max-width: 126px; border-right: 0px !important; }

nav li a { 
padding-top: 10px; padding-bottom: 10px; border-right: 1px solid white;    font-size: 16px;text-decoration: none; font-weight: normal !important; color: white; }

nav ul ul ul li {
position: relative;
top: -43px;
left: 225px;
}

}

/*768px*//*768px*//*768px*//*768px*/

@media only screen and (min-width: 768px) and (max-width: 992px) {

.about_msaa_nav { margin-left: 0px; }

.swim_button { min-width: 100% !important; max-width: 100%; text-align: left !important; padding-left: 25px; }


#hide_nav { text-align: center; display: block; background-color: white; }

#hide_nav:hover { background-color: #0255a1; cursor: hand !important;}


nav li a { margin-top: -0px;
border-right: 0px solid white;    border-bottom: 0px solid white; }

nav li li li a {
background: #c3e0e8;
z-index:200; color: black !important; }

}


/*480px*//*480px*//*480px*//*480px*/

@media only screen and (min-width: 480px) and (max-width: 768px) {

.about_msaa_nav { margin-left: 0px; }

.swim_button { min-width: 100% !important; max-width: 100%; text-align: left !important; padding-left: 25px; }

#hide_nav { text-align: center; display: block; background-color: white; }

#hide_nav:hover { background-color: #0255a1; cursor: hand !important;}


nav li a { margin-top: -0px;
border-right: 0px solid white;    border-bottom: 0px solid white; }

nav li li li a {
background: #c3e0e8;
z-index:200; color: black !important; }

}


/*320px*//*320px*//*320px*//*320px*/

@media only screen and (min-width: 320px) and (max-width: 480px) {

.about_msaa_nav { margin-left: 0px; }

.swim_button { min-width: 100% !important; max-width: 100%; text-align: left !important; padding-left: 25px; }

#hide_nav { text-align: center; display: block; background-color: white; }

#hide_nav:hover { background-color: #0255a1; cursor: hand !important;}


nav li a { margin-top: -0px;
border-right: 0px solid white;    border-bottom: 0px solid white; }

nav li li li a {
background: #c3e0e8;
z-index:200; color: black !important; }

}
/*NAVIGATION*//*NAVIGATION*//*NAVIGATION*/


</style>


<!--NAVIGATION MENU-->
<nav>
<!--MENU TOGGLE-->
<label for="drop" class="toggle" id="hide_nav" style="margin-top: -80px;    width: 45px; height: 90px; margin-bottom: -10px; padding: 10px; border-right: 0px solid black; border-bottom: 0px solid black;">

<img src="http://mymsaa.org/wp-content/uploads/2016/03/hamburger.jpg" style="margin-top: 17px;" alt="Navigation Toggle"></label>
<input type="checkbox" id="drop" />
<!--MENU TOGGLE-->
<ul class="menu">
<!--MS Information-->     
<li> 
<label for="drop-1" class="toggle">MS Information</label>
<a href="#" class="ms_button">MS Information</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="http://mymsaa.org/ms-information/overview/">MS Overview &#038; Glossary</a></li>
<li><a href="http://mymsaa.org/ms-information/newly-diagnosed/">Newly Diagnosed</a></li>
<li><a href="http://mymsaa.org/ms-information/symptoms/">Symptoms</a></li>
<li><a href="http://mymsaa.org/ms-information/treatments/">Treatments</a></li>
<li><a href="http://mymsaa.org/ms-information/search/">S.E.A.R.C.H.&#8482; for Treatment Options</a></li>
<li><a href="http://mymsaa.org/ms-information/prescription-assistance">Prescription Assistance Programs</a></li>
<li><a href="http://mymsaa.org/ms-information/publications/">Publications</a></li>
<li><a href="http://mymsaa.org/news/">Latest News from MSAA</a></li>
<li><a href="http://mymsaa.org/ms-information/videos/">MSi Videos</a></li>
<li><a href="http://mymsaa.org/msaa-help/helpline-chat/">Toll-Free Helpline &#038; Chat</a></li>
<li><a href="http://mymsaa.org/ms-information/spanish">Information in Spanish</a></li>
<li><a href="http://mymsaa.org/ms-information/faqs/">FAQs</a></li>
</ul>
</li>
<!--MS Information-->        
<!--How MSAA Can Help-->
<li> 
<label for="drop-2" class="toggle">How MSAA Can Help</label>
<a href="#" class="how_button">How MSAA Can Help</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="http://mymsaa.org/msaa-help/helpline-chat/">Toll-Free Helpline &#038; Chat</a></li>
<li><a href="http://mymsaa.org/ms-information/publications/">Publications</a></li>
<li><a href="http://mymsaa.org/ms-information/videos/">MSi Videos</a></li>
<li><a href="http://mymsaa.org/msaa-help/cooling-products/">Cooling Products</a></li>
<li><a href="http://mymsaa.org/msaa-help/assistive-equipment/">Assistive Equipment</a></li>
<li><a href="http://mymsaa.org/msaa-help/mri/">MRI Access Fund</a></li>
<li><a href="http://mymsaa.org/msaa-help/educational-programs/">Educational Programs</a></li>
<li><a href="http://mymsaa.org/msaa-help/shared-management-tools/">Shared-Management Tools</a></li>
<li><a href="http://mymsaa.org/msaa-help/lending-library/">Lending Library</a></li>
<li><a href="http://mymsaa.org/msaa-help/overall-wellness/">Overall Wellness</a></li>
<li><a href="http://aquatics.mymsaa.org/" target="_new">Online Aquatic Center</a></li>
<li><a href="http://mymsaa.org/msaa-help/faqs/">FAQs</a></li>
</ul>
</li>
<!--How MSAA Can Help-->
<!--My MSAA Community-->
<li> 
<label for="drop-3" class="toggle">Living with MS</label>
<a href="#"    class="living_button">Living with MS</a>
<input type="checkbox" id="drop-3"/>
<ul>
<li><a href="http://mymsaa.org/msaa-community/my-msaa-community-forum">My MSAA Community</a></li>
<li><a href="http://blog.mymsaa.org/" target="_new">MS Conversations Blog</a></li>
<li><a href="http://mymsaa.org/journey/" target="_new">My MS Journey</a></li>
<li><a href="http://mymsaa.org/msaa-community/mobile/">My MS Manager&#8482; mobile app</a></li>
<li><a href="http://relapses.mymsaa.org/" target="_new">MS Relapse Resource Center</a></li>
<li><a href="http://healthinsuranceguide.mymsaa.org/" target="_new">My Health Insurance Guide</a></li>
<li><a href="http://resources.mymsaa.org/" target="_new">My MS Resource Locator&#174;</a></li>
<li><a href="http://mymsaa.org/msaa-help/overall-wellness/">Overall Wellness</a></li>
<li><a href="http://aquatics.mymsaa.org/" target="_new">Online Aquatic Center</a></li>
<li><a href="http://mymsaa.org/msaa-help/educational-programs/">Educational Programs</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=Networking">Networking Program</a></li>
</ul>
</li>
<!--My MSAA Community-->
<!--Donate-->
<li> 
<label for="drop-4" class="toggle">Donate</label>
<a href="#"    class="donate_button">Donate</a>
<input type="checkbox" id="drop-4"/>
<ul>
<li><a href="https://secure2.convio.net/msaa/site/Donation2?df_id=5421&#038;5421.donation=form1&#038;autologin=true">Make a Donation</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Honor_Memorial_Donations">Honor &#038; Memorial Donations</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer/?pagename=rv16_become_Monthly_Donor">Become a Monthly Donor</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer/?pagename=rv16_PlannedGiving">Planned Giving</a></li>
<li>    <label for="drop-5" class="toggle">Other Ways to Give</label>
<a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Other_Ways_Give">Other Ways to Give</a>
<input type="checkbox" id="drop-5"/>
<!--Other Ways to Give-->
<ul>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Wedding_Occasion_Favors">Wedding &#038; Occasion Favors</a></li>
<li><a href="http://mymsaa.careasy.org" target="_new">Vehicle Donation</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Matching_Gifts">Matching Gifts</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Create_A_Tribute">Create a Tribute</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv_16_Shop_Support">Shop &#038; Support</a></li>
</ul>
<!--Other Ways to Give-->
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Donation_FAQ">FAQs</a></li>
</ul>
</li>
<!--Donate-->
<!--Get Involved-->
<li> 
<label for="drop-6" class="toggle">Get Involved</label>
<a href="#" class="get_button">Get Involved</a>
<input type="checkbox" id="drop-6"/>
<ul>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Volunteer">Volunteer</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Special_Events">MSAA Special Events</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Create_Your_Own_Fundraiser">Create Your Own Fundraiser</a></li>
<li><a href="http://mymsaa.org/artshowcase2016/">Art Showcase</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Partnerships">Partnerships</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Get_Involved_FAQ">FAQs</a></li>
</ul>
</li>
<!--Get Involved-->
<!--Swim for MS-->
<li><a href="http://swimforms.org/" target="_new"    class="swim_button">Swim for MS</a></li>
<!--Swim for MS-->
<!--About MSAA-->
<li> 
<label for="drop-7" class="toggle">About MSAA</label>
<a href="#" style="border-right: 0px;" class="about_button">About MSAA</a>
<input type="checkbox" id="drop-7"/>
<ul class="about_msaa_nav">
<li><a href="http://mymsaa.org/about-msaa/mission/">Mission and Overview</a></li>
<li><a href="http://mymsaa.org/about-msaa/msaa-news/">MSAA Achievements</a></li>
<li><a href="http://mymsaa.org/about-msaa/contact/">Contact Us</a></li>
<li><a href="http://mymsaa.org/about-msaa/regional/">Regional Offices</a></li>
<li><a href="http://mymsaa.org/about-msaa/board/">Board of Directors</a></li>
<li><a href="http://mymsaa.org/about-msaa/council/">Healthcare Advisory Council</a></li>
<li><a href="http://mymsaa.org/about-msaa/coalition/">MS Coalition</a></li>
<li><a href="http://mymsaa.org/about-msaa/annual-report/">Annual Report</a></li>
<li><a href="http://mymsaa.org/about-msaa/financial/">Financial Information</a></li>
</ul>
</li>
<!--About MSAA-->
</ul>
</nav>
<!--NAVIGATION END-->

1 个答案:

答案 0 :(得分:0)

我通过添加此元标记来实现它。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">