Html 如何创建三层下拉菜单？

基本上是标题。我有代码来创建一层下拉菜单。如何创建更多层（这里是第三层）？我的主要目标是在博客网站上创建一个多层下拉菜单。我非常确定我的HTML格式是正确的（我在在线编辑器上尝试过），但在CSS部分我遇到了难题

CSS

HTML

我简化了许多样式（并添加了一个额外的层），以尝试突出显示一个可重复的模式，您可以使用它以编程方式构建嵌套菜单。需要记住的是，

ul

的直接子级应该始终是

li

这主要是通过指定哪些

li

元素包含嵌套的

ul

元素并为它们分配

.sub

类来实现的。然后使用该类将

.sub ul

元素定位并向右移动它所属

li

宽度的100%

此外，使用直接后代选择器-

，我们可以编写一条规则，以便每个悬停的

菜单

类仅在其正下方显示

ul

我正在使用一个

p

标记来设置每个

li

的文本内容的样式，以便它与布局逻辑分离

*{
填充：0；
保证金：0；
列表样式：无；
}
p{
填充物：5px；
}
.第一排{
显示器：flex；
}
.menu>ul{
显示：无；
}
.菜单：悬停>超链接{
显示：块；
}
.menu.sub{
位置：相对位置；
}
.menu.sub ul{
位置：绝对位置；
排名：0；
左：100%；
}

家


小说


印度尼西亚语


葡萄牙语


11月1日


11月2日


第一章

第二章

第三章

我简化了许多样式（并添加了一个额外的层），以尝试突出显示一个可重复的模式，您可以使用它以编程方式构建嵌套菜单。需要记住的是，

ul

的直接子级应该始终是

li

这主要是通过指定哪些

li

元素包含嵌套的

ul

元素并为它们分配

.sub

类来实现的。然后使用该类将

.sub ul

元素定位并向右移动它所属

li

宽度的100%

此外，使用直接后代选择器-

，我们可以编写一条规则，以便每个悬停的

菜单

类仅在其正下方显示

ul

我正在使用一个

p

标记来设置每个

li

的文本内容的样式，以便它与布局逻辑分离

*{
填充：0；
保证金：0；
列表样式：无；
}
p{
填充物：5px；
}
.第一排{
显示器：flex；
}
.menu>ul{
显示：无；
}
.菜单：悬停>超链接{
显示：块；
}
.menu.sub{
位置：相对位置；
}
.menu.sub ul{
位置：绝对位置；
排名：0；
左：100%；
}

家


小说


印度尼西亚语


葡萄牙语


11月1日


11月2日


第一章

第二章

第三章

ul{
列表样式：无；
填充：0；
保证金：0；
背景#1bc2a2；
}
ulli{
显示：块；
位置：相对位置；
浮动：左；
背景#1bc2a2；
}
李乌尔{
显示：无；
}
ullia{
显示：块；
填充：1em；
文字装饰：无；
空白：nowrap；
颜色：#fff；
}
悬停{
背景#2c3e50；
}
/*悬停时显示下拉菜单*/
李：悬停>ul{
显示：块；
位置：绝对位置；
}
李：停下来，李{
浮动：无；
}
李：停一停{
背景#1bc2a2；
}
李：悬停李a：悬停{
背景#2c3e50；
}
.主导航li ul li{
边界顶部：0；
}

ul{
列表样式：无；
填充：0；
保证金：0；
背景#1bc2a2；
}
ulli{
显示：块；
位置：相对位置；
浮动：左；
背景#1bc2a2；
}
李乌尔{
显示：无；
}
ullia{
显示：块；
填充：1em；
文字装饰：无；
空白：nowrap；
颜色：#fff；
}
悬停{
背景#2c3e50；
}
/*悬停时显示下拉菜单*/
李：悬停>ul{
显示：块；
位置：绝对位置；
}
李：停下来，李{
浮动：无；
}
李：停一停{
背景#1bc2a2；
}
李：悬停李a：悬停{
背景#2c3e50；
}
.主导航li ul li{
边界顶部：0；
}

/* Styles the first link in your menu */
.tabs-inner .section:first-child ul {
margin-top: -1px;
border: none;
}

/* Styles the overall navigation bar */
.tabs-inner .widget ul {
background: #000000;
border: none;
text-align: center;
}
/* Styles the individual links */
.tabs-inner .widget li a {
font: 12px Arvo;
border: none;
color: #ffffff;
}
/* Styles the links when hovered over */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #333333;
background-color: #ffffff;
text-decoration: none;
}


#navigationbar {
width: 200%; /* change the width of the navigation bar */
height: 20px; /* change the height of the navigation bar */
}

#navigationcss { 
margin: 0 auto;
padding: 0; 
}

#navigationcss ul { 
float: none; 
list-style: none; 
margin: 0; 
padding: 0; 
overflow: visible; 
}

#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #ffffff; /* change color of the main links */
display: block;
margin: 0;
padding: 10px 25px;  /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
}

#navigationcss li a:hover, #navigationcss li a:active {
color: #E74C3C ; /* change the color of the links when hovered over */
margin: 0;
padding: 10px 25px; /* make sure these are the same as the section above! */
}

#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #ffffff;  /* change the background color of the drop down box */
width: 150px;
color: #000000; /* change the color of the drop down links */
float: none;
margin: 0;
padding: 7px 7px; /* similar to above, change for the spacing around the links */
}

#navigationcss li li a:hover, #navigationcss li li a:active {
background: #E74C3C ; /* change the background color of drop down items on hover */
color: #ffffff; /* change the color of drop down links on hover */
padding: 7px 7px;  /* keep these the same as the above section */
}

#navigationcss li {
float: none; 
display: inline-block; 
list-style: none; 
margin: 0; 
padding: 0; 
}

#navigationcss li ul { 
z-index: 9999; 
position: absolute; 
left: -999em; 
height: auto; 
width: 150px; 
margin: 0;
padding: 0;
}

#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul { 
left: auto; 
}

<!--Start Navigation --> 
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href="LINK">HOME</a></li> 
<li><a href=“LINK”>NOVELS</a>
<ul>
       <li><a href=“LINK”>INDONESIAN</a></li>
       <li><a href=“LINK”>PORTUGUESE</a></li>
           <ul>
                    <li><a href=‘LINK’>PORTUGUESE NOVEL NAME</a></li>
           </ul>
</ul>
</li>
</div>   
<!--End Navigation -->