尝试仅使用HTML和CSS创建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;
}
答案 0 :(得分: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&gt; li(ul&gt; li&gt; div,ul&gt; li&gt; ul&gt; li)并确保您的标签正确关闭。
然后,也许你的.css + javascript会有效。