我有以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<style>
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background-color: #333;
}
.navLi{
display:inline;
}
.nav ol{
display:flex;
}
.nav a{
display:inline-block;
padding:10px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color:white;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
.sideBar{
width:25%;
background:#333;
height: 850px;
}
.whiteColor{
color:white;
}
.paragraph{
padding: 20px;
line-height: 150%;
font-family: ariel;
}
.div1{
width: 75%;
background: white;
}
.textSize{
font-size: 1px;
}
.div2{
border:solid 1px;
display:flex;
}
.image{
float:left;
}
.maxDiv{
max-width: 1000px;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<div class="maxDiv">
<div id="myTopnav">
<ul class="nav">
<li class="navLi"> <a href="givataiim.html" class = "green">0</a></li>
<li class="navLi"><a href="#news" >1</a></li>
<li class="navLi"><a href="#contact">2</a></li>
<li class="navLi"><a href="#about">3</a></li>
<li class="navLi"><a href="#about">4</a></li>
<li class="navLi"><a href="rishon.html" class = "blue">5</a></li>
<li class="navLi"><a href="#about">6</a></li>
<li class="navLi"><a href="hw9.html">7</a></li>
</ul>
</div>
我希望每个李下面都有一个有序的列表（我知道它看起来不好看）
我试着做了一个ol元素，里面有li元素，看起来很奇怪。
当我在每个li里面做ol时，在ol里面放一些li，看起来像：
代码：
<li class="navLi"> <a href="1.html" class = "green">0</a>
<ol>
<li class="navLi"><a href="#news" >1</a></li>
<li class="navLi"><a href="#news" >1</a></li>
</ol>
</li>
李里面的那个ol看起来不像照片上的红方块上画的那么好。
知道吗？
最佳答案
您可以悬停4以查看子菜单。我清理了CSS，删除了找不到的类/id。
子菜单具有绝对位置。两个菜单现在都是使用flexbox定义的。
.nav {
display: flex;
justify-content: center;
align-items: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
.navLi {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
position: relative;
}
.nav ol {
display: none;
position: absolute;
background-color: red;
list-style: none;
padding: 0;
margin: 1px;
}
.navLi:hover ol {
display: flex;
justify-content: center;
align-items: center;
}
.navLi:hover ol li {
padding: 14px 16px;
}
a {
display: block;
padding: 14px 16px;
text-decoration: none;
background-color: #333;
font-size: 17px;
color: white;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.maxDiv {
max-width: 1000px;
margin: auto;
border: 3px solid green;
padding: 10px;
background-color: #333;
}<div class="maxDiv">
<ul class="nav">
<li class="navLi"><a href="givataiim.html" class="green">0</a></li>
<li class="navLi"><a href="#news">1</a></li>
<li class="navLi"><a href="#contact">2</a></li>
<li class="navLi"><a href="#about">3</a></li>
<li class="navLi"><a href="#about">4</a>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</li>
<li class="navLi"><a href="rishon.html" class="blue">5</a></li>
<li class="navLi"><a href="#about">6</a></li>
<li class="navLi"><a href="hw9.html">7</a></li>
</ul>
</div>关于html - 里面的锂导致问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44438078/