0

尝试仅使用 HTML 和 CSS 创建 3 级菜单。当我单击第一级时，我可以让它显示第二级，但是当我单击第二级中的任何内容时，它只会关闭菜单。我也能得到它，所以当我点击 1 级时，它会同时打开 2 级和 3 级以供我单击的选项。

我刚开始接触 CSS，所以请提供任何建设性的批评。我敢肯定这是我想念的简单东西。不想用js。（很快就学会了）有人可以看看吗？

这是HTML

<div id="menu">
    <ul class="show-menu">
        <li id="weekdays">
            <a href="#weekdays">Weekday Programming</a>
            <ul class="wd-menu">
                <li><a href="#">The Bigg Nez Show (M-F 9-noon)</a></li>
                <li><a href="#">The Rob Kaufman Show (M-F 4-7)</a></li>
                <li><a href="#">The Void w/Sabrina Boyd (Tu/Th 12-2p)</a></li>
                <li><a href="#">The Menace's Attic (Mon 2-4p)</a></li>
                <li><a href="#">DigBoston Presents (Tue 2-4p)</a></li>
                <li><a href="#">The Good American (Fri 2-4p)</a></li>
            </ul>
        </li>
        <li id="weeknights">
            <a href="#weeknights">Weeknight Programming</a>
            <ul class="wn-menu">
                <li><a href="#monday">Monday</a></li>
                <ul class="three-line">
                    <li><a href="#">The Anthony Duva Show</a></li>
                    <li><a href="#">The Adult Entertainment Show</a></li>
                    <li><a href="#">GeekBeat Radio</a></li>
                </ul>
                <li><a href="#tuesday">Tuesday</a></li>
                <ul class="two-line">
                    <li><a href="#">Spin City</a></li>
                    <li><a href="#">Three Strange Women</a></li>
                </ul>
                <li><a href="#wednesday">Wednesday</a></li>
                <ul class="two-line">
                    <li><a href="#">The Chicken Spot</a></li>
                    <li><a href="#">Saucy Entertainment</a></li>
                </ul>
                <li><a href="#thursday">Thursday</a></li>
                <ul class="three-line">
                    <li><a href="#">Banned in Boston</a></li>
                    <li><a href="#">Organized Nonsense</a></li>
                    <li><a href="#">The D-Pad</a></li>
                </ul>
                <li><a href="#friday">Friday</a></li>
                <ul class="three-line">
                     <li><a href="#">Beats, Rhymes &#38; Life</a></li>
                     <li><a href="#">The Living Room</a></li>
                     <li><a href="#">3&#39;s Company</a></li>
                </ul>                   
            </ul>
        </li>
        <li id="weekends">
            <a href="#weekends">Weekend Programming</a>
            <ul class="we-menu">
        <div id="saturday">    
                <li><a href="#saturday">Saturday</a></li>
            <ul class="eight-line">
                 <li><a href="#">Boston Pot Report</a></li>
                 <li><a href="#">Blues &#38; Beyond</a></li>
                 <li><a href="#">Two Hotheads</a></li>
                 <li><a href="#">Citywide Blackout</a></li>
                 <li><a href="#">Boston Shit Show</a></li>
                 <li><a href="#">Bottoms Up</a></li>
                 <li><a href="#">Radio Remi</a></li>
                 <li><a href="#">The DJ Hothands Hour</a></li>
            </ul> 
        <div id="sunday">
                <li><a href="#sunday">Sunday</a></li>
            <ul class="six-line">
                 <li><a href="#">Keeping it Latin</a></li>
                 <li><a href="#">Shady Lady Sports Show</a></li>
                 <li><a href="#">The Audio Spectrum</a></li>
                 <li><a href="#">The Lifestyles Show</a></li>
                 <li><a href="#">The Foundation</a></li>
                 <li><a href="#">Sterlingtology</a></li>
            </ul>
        </ul>
    </li>
</ul>
</div>
<!--end accordian-->

这是CSS：

    #menu { width:250px;
    margin: 0 auto;
}

/* clearing */

.show-menu,
.show-menu ul,
.show-menu li,
.show-menu a,
.show-menu span {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}

.show-menu li {
    list-style: none;
}

/* main menu style */

.show-menu li > a {
    display: block;
    position: relative;
    min-width: 160px;
    padding: 0 10px 0 0;
    text-align: center;
    height:28px;

    color: #FFFFFF;
    font: bold 11px/28px Arial, sans-serif;
    text-decoration: none;


    background: #343435;
    background: -moz-linear-gradient(top, #343435 1%, #4a4a4a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#343435), color-stop(100%,#4a4a4a));
    background: -webkit-linear-gradient(top, #343435 1%,#4a4a4a 100%);
    background: -o-linear-gradient(top, #343435 1%,#4a4a4a 100%);
    background: -ms-linear-gradient(top, #343435 1%,#4a4a4a 100%);
    background: linear-gradient(top, #343435 1%,#4a4a4a 100%);

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.show-menu > li:hover > a {
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);


    background: #F0EF8A;
    background: -moz-linear-gradient(top, #F0EF8A 1%, #BFBFBF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F0EF8A), color-stop(100%,#BFBFBF));
    background: -webkit-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -o-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -ms-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);


    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

/* weekday style */

.wd-menu li a {
    color: #333333;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    text-align: left;
    background: #D7D3D3;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #c1bfbf;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.wd-menu li:hover a {
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);


    background: #F0EF8A;
    background: -moz-linear-gradient(top, #F0EF8A 1%, #BFBFBF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F0EF8A), color-stop(100%,#BFBFBF));
    background: -webkit-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -o-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -ms-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);


    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}


/* weeknight style */

.wn-menu li a {
    color: #ffffff;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    text-align: left;
    background: #666666;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #c1bfbf;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.wn-menu li:hover a {
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);


    background: #F0EF8A;
    background: -moz-linear-gradient(top, #F0EF8A 1%, #BFBFBF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F0EF8A), color-stop(100%,#BFBFBF));
    background: -webkit-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -o-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -ms-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);


    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
 }
/* weekend style */

.we-menu li a {
    color: #ffffff;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    text-align: left;
    background: #666666;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #c1bfbf;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
 }

.we-menu li:hover a {
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);


    background: #F0EF8A;
    background: -moz-linear-gradient(top, #F0EF8A 1%, #BFBFBF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F0EF8A), color-stop(100%,#BFBFBF));
    background: -webkit-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -o-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -ms-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);


    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

/* two-line style */

.two-line li a {
    color: #333333;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    text-align: left;
    background: #D7D3D3;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #c1bfbf;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.two-line li:hover a {
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);


    background: #F0EF8A;
    background: -moz-linear-gradient(top, #F0EF8A 1%, #BFBFBF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F0EF8A), color-stop(100%,#BFBFBF));
    background: -webkit-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -o-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -ms-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);


    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
/* three-line style */

.three-line li a {
    color: #333333;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    text-align: left;
    background: #D7D3D3;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #c1bfbf;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.three-line li:hover a {
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);


    background: #F0EF8A;
    background: -moz-linear-gradient(top, #F0EF8A 1%, #BFBFBF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F0EF8A), color-stop(100%,#BFBFBF));
    background: -webkit-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -o-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -ms-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);


    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

/* six-line style */

.six-line li a {
    color: #333333;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    text-align: left;
    background: #D7D3D3;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #c1bfbf;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.six-line li:hover a {
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);


    background: #F0EF8A;
    background: -moz-linear-gradient(top, #F0EF8A 1%, #BFBFBF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F0EF8A), color-stop(100%,#BFBFBF));
    background: -webkit-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -o-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -ms-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);


    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

 /* eight-line style */

.eight-line li a {
    color: #333333;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    text-align: left;
    background: #D7D3D3;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #c1bfbf;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.eight-line li:hover a {
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);


    background: #F0EF8A;
    background: -moz-linear-gradient(top, #F0EF8A 1%, #BFBFBF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F0EF8A), color-stop(100%,#BFBFBF));
    background: -webkit-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -o-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: -ms-linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);
    background: linear-gradient(top, #F0EF8A 1%,#BFBFBF 100%);


    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}



/* weekday accordion action */

.show-menu li > .wd-menu {
    height: 0;
    overflow: hidden;

    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    -o-transition: height .3s ease-in-out;
    -ms-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
}


.show-menu li:target > .wd-menu {
    height: auto;
}

/* weeknight accordion action */
.show-menu li > .wn-menu {
    height: 0;
    overflow: hidden;

    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    -o-transition: height .3s ease-in-out;
    -ms-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
}

.show-menu li:target > .wn-menu {
    height: auto;
}

/* weekend accordion action */
.show-menu li > .we-menu {
    height: 0;
    overflow: hidden;

    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    -o-transition: height .3s ease-in-out;
    -ms-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
}

.show-menu li:target > .we-menu {
    height: auto;
}

/* two-line accordion action */
.two-line {
    height: 0;
    overflow: hidden;

    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    -o-transition: height .3s ease-in-out;
    -ms-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
}

.show-menu li:target > .two-line {
    height: auto;
}

/* three-line accordion action */
.three-line {
    height: 0;
    overflow: hidden;

    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    -o-transition: height .3s ease-in-out;
    -ms-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
}

.show-menu li:target > .three-line {
    height: auto;
}

/* six-line accordion action */
.six-line {
    height: 0;
    overflow: hidden;

    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    -o-transition: height .3s ease-in-out;
    -ms-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
}

.we-menu li:target > .six-line {
    height: auto;
}

/* eight-line accordion action */
.eight-line {
    height: 0;
    overflow: hidden;

    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    -o-transition: height .3s ease-in-out;
    -ms-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
}

 .we-menu li:target > .eight-line {
    height: auto;
}
4

1 回答 1

0

你的标记搞砸了。

从有效的 html 编码开始：

<a href="#weeknights">Weeknight Programming</a>
        <ul class="wn-menu">
            <li><a href="#monday">Monday</a></li>

    /* this next block is not well nested  */
            <ul class="three-line">
             <li><a href="#">The Anthony Duva Show</a></li>
             <li><a href="#">The Adult Entertainment Show</a></li>
             <li><a href="#">GeekBeat Radio</a></li>
        </ul>
        <li><a href="#tuesday">Tuesday</  etc.etc etc.

修改您的代码以正确嵌套 ul > li ( ul > li > div, ul > li > ul > li ) 并确保您的标签正确关闭。

然后，也许你的 .css+javascript 会起作用。

于 2013-07-12T18:56:06.000 回答