Colapsible/expandable menu in pure XHTML/CSS
I wrote this code, and it works fine on Windows in FireFox, Safari, Google Chrome, Opera. Where it doesn't work is IE8 on Windows 7 as well we Mac Os 10.7, Safari 5.1.7 and chrome version 13.0.782.112 on the same Mac. How do I fix it? Here is the URL: Here is my HTML:
<div id = "submenu">
<ol class="tree">
<li>
<label for="folder1"><a href="intro.php">PKDiet</a></label> <input type="checkbox" checked id="folder1" />
</li>
<li>
<label for="folder2"><a href="http://www.pkdiet.com/pages/pkd/pkdhealth.htm">PKD Health</a></label> <input type="checkbox" checked id="folder2" />
<ol>
<li>
<label for="subfolder1"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/renalperf.htm">Kidney Blood Flow</a></label> <input type="checkbox" id="subfolder1" />
</li>
<li>
<label for="subfolder2"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/pkdtoxin.htm">PKD Kidney Toxins</a></label> <input type="checkbox" id="subfolder2" />
</li>
<li>
<label for="subfolder3"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/imagingstudies.htm">Imaging Studies</a></label> <input type="checkbox" id="subfolder3" />
</li>
<li>
<label for="subfolder4"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/habits.htm">Habits</a></label> <input type="checkbox" id="subfolder4" />
</li>
<li>
<label for="subfolder5"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/exercise.htm">Exercise</a></label> <input type="checkbox" id="subfolder5" />
</li>
<li>
<label for="subfolder6"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/art2hit.htm">Second Hit Phenomenon</a></label> <input type="checkbox" id="subfolder6" />
</li>
</ol>
</li>
<li>
<label for="folder3"><a href="http://www.pkdiet.com/pages/pkd/pkdsymptoms.htm">PKD Symptoms</a></label> <input type="checkbox" id="folder3" />
<ol>
<li>
<label for="subfolder7"><a href="http://www.pkdiet.com/pages/pkd/pkdanemia.htm">Anemia</a></label> <input type="checkbox" id="subfolder7" />
</li>
<li>
<label for="subfolder8"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/lvh.htm">Left Ventricular Hypertrophy</a></label> <input type="checkbox" id="subfolder8" />
</li>
<li>
<label for="subfolder9"><a href="http://www.pkdiet.com/pages/pkd/pkdbp.htm">Blood Pressure</a></label> <input type="checkbox" id="subfolder9" />
<ol>
<li class="file"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/artbp.html">Blood Pressure Articles</a></li>
</ol>
</li>
<li>
<label for="subfolder10"><a href="http://www.pkdiet.com/pages/pkd/pkdproteinuria.htm">Proteinuria</a></label> <input type="checkbox" id="subfolder10" />
<ol>
<li class="file"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/artbrennerbio.htm">Dr. Brenner's Bio</a></li>
<li class="file"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/artprotein.htm">Neutral Protein Intake</a></li>
<li class="file"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/protlion.htm">Eating Like a Lion Harms GFR</a></li>
<li class="file"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/arteaaa.htm">Essential Amino Acids</a></li>
<li class="file"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/vlopro.htm">Very Low Protein</a></li>
<li class="file"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/PKDlowprotein.htm">Low Protein</a></li>
<li class="file"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/morevlopro.htm">Articles on Very Low Protein</a></li>
</ol>
</li>
<li>
<label for="subfolder11"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/swelling.htm">Swelling</a></label> <input type="checkbox" id="subfolder11" />
</li>
<li>
<label for="subfolder12"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/itching.htm">Itching</a></label> <input type="checkbox" id="subfolder12" />
</li>
<li>
<label for="subfolder13"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/PKDitchy.htm">More on Itching</a></label> <input type="checkbox" id="subfolder13" />
</li>
<li>
<label for="subfolder14"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/pkdbirths.htm">PKD Births Choices</a></label> <input type="checkbox" id="subfolder14" />
</li>
</ol>
</li>
<li>
<label for="folder4"><a href="http://www.pkdiet.com/pages/pkd/pkdtrials.htm">PKD Trials</a></label> <input type="checkbox" id="folder4" />
<ol>
<li>
<label for="subfolder15"><a href="http://www.pkdiet.com/pages/pkd/pkdhalt.htm">HALT</a></label> <input type="checkbox" id="subfolder15" />
</li>
开发者_StackOverflow中文版 <li>
<label for="subfolder16"><a href="http://www.pkdiet.com/pages/pkd/pkdcrisp.htm">CRISP</a></label> <input type="checkbox" id="subfolder16" />
</li>
<li>
<label for="subfolder17"><a href="tolvaptan.php">Tolvaptan</a></label> <input type="checkbox" id="subfolder17" />
</li>
<li>
<label for="subfolder18"><a href="http://www.pkdiet.com/pages/pkd/water.htm">Water</a></label> <input type="checkbox" id="subfolder18" />
<ol>
<li class="file"><a href="http://www.pkdiet.com/pages/herbs/food/solemore.htm">Solé a Bit More</a></li>
<li class="file"><a href="http://www.pkdiet.com/pages/herbs/food/salt.htm">Himalayan Salt</a></li>
<li class="file"><a href="http://www.pkdiet.com/pages/herbs/food/sole.htm">Solé a Recipe</a></li>
<li class="file"><a href="http://www.pkdiet.com/pages/herbs/food/waterbottled.htm">Bottled Waters</a></li>
<li class="file"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/cystgrowth.htm">Diminish Cyst Growth</a></li>
</ol>
</li>
</ol>
</li>
<li>
<label for="folder5"><a href="http://www.pkdiet.com/pages/pkd/pkdtx.htm">Transplant</a></label> <input type="checkbox" id="folder5" />
<ol>
<li>
<label for="subfolder19"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/artdonorxchg.htm">Donor Exchange</a></label> <input type="checkbox" id="subfolder19" />
</li>
</ol>
</li>
<li>
<label for="folder6"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/artdialysis.htm">Dialysis</a></label> <input type="checkbox" checked id="folder6" />
<ol>
<li>
<label for="subfolder20"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/PKDdialysis.htm">Dialysis vs Transplant</a></label> <input type="checkbox" id="subfolder20" />
</li>
<li>
<label for="subfolder21"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/leucine.htm">Leucine</a></label> <input type="checkbox" id="subfolder21" />
</li>
<li>
<label for="subfolder22"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/PKDlowpotassium.htm">Low Potassium</a></label> <input type="checkbox" id="subfolder22" />
</li>
<li>
<label for="subfolder23"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/phosphorus.htm">Phosphorus</a></label> <input type="checkbox" id="subfolder23" />
</li>
<li>
<label for="subfolder24"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/artalbumin.htm">Albumin</a></label> <input type="checkbox" id="subfolder24" />
</li>
<li>
<label for="subfolder25"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/PKDlowsodium.htm">Sodium Low</a></label> <input type="checkbox" id="subfolder25" />
</li>
<li>
<label for="subfolder26"><a href="http://www.pkdiet.com/pages/pkd/pkdarticles/morevlopro.htm">Very Low Protein</a></label> <input type="checkbox" id="subfolder26" />
</li>
</ol>
</li>
<li>
<label for="folder7"><a href="http://www.pkdiet.com/pages/pkd/pkdart.htm">PKD Articles</a></label> <input type="checkbox" id="folder7" />
</li>
</ol>
</div>
Here is my CSS:
ol.tree
{
padding: 0 0 0 30px;
width: 130px;
}
ol.tree a {
color:#996637;
font-family: Tunga, sans-serif;
font-size: 12px;
}
li
{
position: relative;
margin-left: -15px;
list-style: none;
}
li.file
{
margin-left: -1px !important;
}
li.file a
{
color:#996637;
font-family: Tunga, sans-serif;
font-size: 12px;
padding-left: 21px;
text-decoration: none;
display: block;
}
li.file a:visited
{
color:#996637;
font-family: Tunga, sans-serif;
font-size: 12px;
padding-left: 21px;
text-decoration: none;
display: block;
}
li input
{
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
}
li input + ol
{
background: url(images/toggle-small-expand.png) 40px 0 no-repeat;
margin: -0.938em 0 0 -44px;
xdisplay: block;
height: 1em;
}
li input + ol > li { height: 0; overflow: hidden; margin-left: -14px !important; padding-left: 1px; }
li label
{
cursor: pointer;
display: block;
padding-left: 17px;
color:#996637;
font-family: Tunga, sans-serif;
font-size: 12px;
}
li input:checked + ol
{
background: url(images/toggle-small.png) 40px 5px no-repeat;
margin: -1.25em 0 0 -44px;
padding: 1.563em 0 0 80px;
height: auto;
}
li input:checked + ol > li { height: auto; margin: 0 0 0.125em;}
li input:checked + ol > li:last-child { margin: 0 0 0.063em;}
Part of the problem with this code is the usage of :checked. This is CSS3, which IE9 is the only version of Internet explorer that supports it.
Btw, I like your usage of the + pseudo selector, it doesn't get enough love.
http://www.w3.org/TR/css3-selectors/#checked
精彩评论