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 & Life</a></li>
<li><a href="#">The Living Room</a></li>
<li><a href="#">3'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 & 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;
}
您粘貼了很多代碼,也許您應該嘗試摘錄顯示錯誤的關鍵部分,以便於調試。 – Zhanger
這裏是一個小提琴中的代碼:http://jsfiddle.net/4cd8t/ – Samuel
你有一些無效的HTML,可能是由於複製/粘貼SNAFU。用有效的代碼更新這個小提琴,然後添加一個鏈接到更新版本到你的答案。 http://jsfiddle.net/isherwood/SsQgf – isherwood