我有以下代码:
<!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>
我希望每个li下面都有一个有序列表(我知道它看起来不太漂亮) 我尝试在其中制作一个ol元素和一些li,它看起来很奇怪。 当我在每个li里面和ol里面做ol时,我把它看起来像是:
代码:
<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看起来不太好。
有什么想法吗?
答案 0 :(得分:1)
您可以将鼠标悬停在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;
}
&#13;
<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>
&#13;