3 단계 CSS3 전용 메뉴가 열리지 않습니다. 3 단계

HTML과 CSS만으로 3 단계 메뉴를 만들려고합니다. 첫 번째 레벨을 클릭하면 두 번째 레벨을 표시 할 수 있지만 두 번째 레벨의 아무 것도 클릭하면 메뉴가 닫힙니다. 나는 1 단계를 클릭 할 때 2 단계와 3 단계를 동시에 클릭 할 수있는 옵션을 선택할 수있게되었습니다.3 단계 CSS3 전용 메뉴가 열리지 않습니다. 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; 
}

출처

2013-07-12 UNregular John

꽤 많은 코드를 붙여 넣었을 것입니다. 디버깅을 쉽게하기 위해 오류를 보여주는 주요 부분을 추출해야합니다. – Zhanger

다음은 바이올린의 코드입니다. http://jsfiddle.net/4cd8t/ – Samuel

일부 잘못된 HTML이 있습니다. 복사/붙여 넣기 SNAFU가 원인 일 수 있습니다. 유효한 코드로이 바이올린을 업데이트 한 다음 업데이트에 대한 링크를 업데이트에 추가하십시오. http://jsfiddle.net/isherwood/SsQgf – isherwood

가 귀하의 마크 업이 엉망이된다. 유효한 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> 리 (UL> 리> DIV, UL> 리> UL> 리)가 있는지 태그가 제대로 닫혀 수 있도록 코드를 수정한다 .

, 아마도 .css + javascript가 작동합니다.

출처

2013-07-12 18:56:06

3 단계 CSS3 전용 메뉴가 열리지 않습니다. 3 단계

답변

관련 문제