gpt4 book ai didi

html - 3 级 CSS3-only 菜单不打开第 3 级

转载 作者:行者123 更新时间:2023-11-28 12:42:17 24 4
gpt4 key购买 nike

尝试仅使用 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;
}

最佳答案

您的标记一团糟。

从有效的 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 可以工作。

关于html - 3 级 CSS3-only 菜单不打开第 3 级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17621669/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com