我目前正在开发的网站正在使用http://www.thecssninja.com/css/css-tree-menu中的导航。我遇到的问题是在IE 8及更低版本中 - 下拉列表的锚点上的type="checkbox"样式显示了复选框。出现该复选框，但不允许用户单击bg图像以切换下拉菜单。
我正在寻找一种解决此问题的方法，而无需重建整个导航。我需要隐藏复选框并允许菜单切换。我愿意使用java / jquery来实现这一点。
我这里有一个jsfiddle，但除非在IE 8浏览器模式下查看，否则无法看到问题。
提前谢谢你们。
HTML
<ul class="tree">
<li>
<label class="menu_first"><a href="/treatment_options/">Treatment Options</a></label></li>
<li>
<label class="menu_first"><a href="/benefits_and_risks/">Benefits & Risks</a></label></li>
<li>
<label class="menu_first"><a href="/donate/">Donation: Step-by-Step</a></label></li>
<li>
<label class="menu_first"><a href="/financial_issues/">Financial Issues</a></label></li>
<li>
<label class="menu_first"><a href="/immigrant_issues/">Immigrant Issues</a></label></li>
<li>
<label class="menu_first"><a href="/cultural_beliefs_and_myths/">Cultural Beliefs & Myths</a></label></li>
<li>
<label class="menu_first_last" for="folder7"><a href="/about_us/">About Us</a></label> <input id="folder7" type="checkbox" />
<ul>
<li class="file_first">
<a href="/about_us/mission/">- Mission</a></li>
<li class="file">
<a href="/about_us/our_story/">- Our Story</a></li>
<li class="file">
<a href="/about_us/our_team/">- Our Team</a></li>
<li class="file">
<a href="/about_us/community_advisory_board/">- Community Advisory Board</a></li>
<li class="file">
<a href="/about_us/photos/">- Photos</a></li>
<li class="file">
<a href="/about_us/partners/">- Partners</a></li>
<li class="file">
<a href="/about_us/publications_and_press/">- Publications & Press</a></li>
<li class="file">
<a href="/about_us/contact_us/">- Contact Us</a></li>
</ul>
</li>
<li>
<label class="menu_first_last" for="folder8"><a href="/information_and_resources/">Resources</a></label> <input id="folder8" type="checkbox" />
<ul>
<li class="file_first">
<a href="/information_and_resources/transplant_center_finder/">- Transplant Center Finder</a></li>
<li class="file">
<a href="/information_and_resources/financial_resources/">- Financial Resources</a></li>
<li class="file">
<a href="/information_and_resources/pharmaceutical_company_programs/">- Pharmaceutical Company Programs</a></li>
<li class="file">
<a href="/information_and_resources/websites_on_living_kidney_donation/">- Websites on Living Kidney Donation</a></li>
<li class="file">
<a href="/information_and_resources/religious_perspectives/">- Religious Perspectives</a></li>
<li class="file">
<a href="/information_and_resources/donor_and_recipient_testimonials/">- Donor and Recipient Testimonials</a></li>
<li class="file">
<a href="/information_and_resources/support_groups/">- Support Groups</a></li>
<li class="file">
<a href="/information_and_resources/glossary/">- Glossary</a></li>
</ul>
</li>
</ul>
CSS：
ul.tree{
padding:10px 5px 10px 19px;
width: 206px;
background-color:#eaeaea;
margin-top:0px;
font-family:"FutConM",Arial,Helvetica,sans-serif;
font-size:26px;
border-bottom: 15px solid #FF6633;
}
li{
position: relative;
margin-left: -15px;
list-style: none;
color:#363636;
}
li.file{
margin-left: -1px !important;
}
li.file a{
background:;
color:#363636;
text-decoration: none;
display: block;
margin-left:-63px;
line-height:25px;
font-size:17px;
}
li.file_last a{
background:;
color:#363636;
text-decoration: none;
display: block;
margin-left:-49px;
line-height:25px;
font-size:17px;
border-bottom:1px solid #999999;
}
li.file_first a{
background:;
color:#363636;
text-decoration: none;
display: block;
margin-left:-50px;
line-height:25px;
font-size:17px;
}
li.file_first a:hover{
color:#999999;
}
li.file_last a:hover{
color:#999999;
}
li.file a:hover{
color:#999999;
}
li.file a[href *= '.pdf']{
background: url(document.png) 0 0 no-repeat;
}
li.file a[href *= '.html']{
background: url(document.png) 0 0 no-repeat;
}
li.file a[href $= '.css']{
background: url(document.png) 0 0 no-repeat;
}
li.file a[href $= '.js']{
background: url(document.png) 0 0 no-repeat;
}
li input{
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
margin-top: 10px;
}
li input + ul {
background: url("/images/navtree/toggle-small-expand.png") no-repeat scroll 0 0 transparent;
height: 23px;
margin-bottom: 4px;
margin-left: 1px;
margin-top: -28px;
width:5px;
}
li input + ul > li{
display: none;
margin-left: -14px !important;
padding-left: 1px;
}
li label{
cursor: pointer;
display: block;
padding-left: 15px;
border-top:1px solid #999;
padding-top:5px;
padding-bottom:5px;
}
li label.menu_first a{
text-decoration: none;
display: block;
color:#363636;
}
li label.menu_first a:hover{
text-decoration: none;
display: block;
color:#ffffff;
}
li label.menu_first:hover{
background-color:#F63;
}
li label.menu_first:active{
background-color:#F63;
}
li label.menu_first:visited{
background-color:#F63;
}
li label.menu_first_last{
background:;
cursor: pointer;
display: block;
padding-left: 15px;
border-top:1px solid #999;
border-bottom:1px solid #999;
}
li label.menu_first_last a{
text-decoration: none;
display: block;
color:#363636;
}
li label.menu_first_last a:hover{
text-decoration: none;
display: block;
color:#ffffff;
}
li label.menu_first_last:hover{
background-color:#F63;
color:#ffffff;
}
li label.menu_first_last:active{
background-color:#F63;
}
li label.menu_first_last:visited{
background-color:#F63;
}
li input:checked + ul
{
background: url("/images/navtree/toggle-small.png") 0px 0px no-repeat;
margin-left: 1px;
margin-top: -28px; /* 20px */
padding: 1.563em 0 0 80px;
height: auto;
width:145px;
}
li input:checked + ul > li{
display: block;
margin: 0 0 0.125em; /* 2px */
}
li input:checked + ul > li:last-child{
margin: 0 0 0.063em; /* 1px */
}