html - 纯 HTML/CSS 中的可折叠/可展开菜单

Question

我编写了这段代码，它在 Windows 上的 FireFox、Safari、Google Chrome、Opera 上运行良好。它不起作用的地方是 Windows 7 上的 IE8，以及我们在同一台 Mac 上的 Mac Os 10.7、Safari 5.1.7 和 chrome 版本 13.0.782.112。我如何解决它？这是网址:这是我的 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>
                <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>

这是我的 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;}

Answer 1

这段代码的部分问题在于 :checked 的使用。这就是 CSS3，IE9 是唯一支持它的 Internet Explorer 版本。

顺便说一句，我喜欢你对 + 伪选择器的使用，它没有得到足够的喜爱。

http://www.w3.org/TR/css3-selectors/#checked