醇內裏造成的問題

我有以下代碼：醇內裏造成的問題

<!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元素和裏面的一些李，它看起來很奇怪。當我做每個L1是醇我把一些裏內內的醇，它看起來是這樣的：

代碼：

<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看起來並不好，因爲標在照片中的紅色方塊。

有什麼想法？

來源

2017-06-08 Natezz

嵌套時，你需要做出新的CSS規則的嵌套列表，因爲他們將裏面出現，也舒展其父李名單。 –

感謝您的迴應，有什麼規則？ – Natezz

你需要玩嵌套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>

來源

2017-06-08 14:59:17 Gerard

醇內裏造成的問題

回答

相關問題