2013-07-12 26 views
0

試圖創建一個3級菜單隻使用HTML和CSS。當我點擊第一層時,我可以讓它顯示第二層,但當我點擊第二層中的任何東西時,它只是關閉菜單。我已經能夠獲得它,所以當我點擊第一級時,它會同時打開第二級和第三級,以便點擊我的選項。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; 
} 
+0

您粘貼了很多代碼,也許您應該嘗試摘錄顯示錯誤的關鍵部分,以便於調試。 – Zhanger

+0

這裏是一個小提琴中的代碼:http://jsfiddle.net/4cd8t/ – Samuel

+1

你有一些無效的HTML,可能是由於複製/粘貼SNAFU。用有效的代碼更新這個小提琴,然後添加一個鏈接到更新版本到你的答案。 http://jsfiddle.net/isherwood/SsQgf – isherwood

回答

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>李(UL> LI> DIV,UL> li> ul> LI),並確保您的標籤是正確關閉。

然後,也許你的.css + javascript會工作。