CSS學習案例(14):下拉導航選單
<div class="container">
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">About Me</a>
<div class="sub">
<ul>
<li> <a href="#">Photo</a></li>
<li> <a href="#">Video</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Articles on HTML5&CSS3</a>
<div class="sub">
<ul>
<li> <a href="#">Difference
between SVG vs. Canvas</a></li>
<li> <a href="#">New features in HTML5</a></li>
<li> <a href="#">Creating
links to sections within a webpage</a></li>
</ul>
</div>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
*{margin: 0;padding: 0;}
body{
height: 100vh;width: 100vw;
background-color: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
}
.container{
transform: translateY(-100px);
text-align: center;
font-weight: bold;
color: #fff;
}
.menu>ul>li{
width: auto;
list-style: none;
float: left;
position: relative;
}
.menu>ul>li>a{
display: block;
background-color: #0984e3;
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: bold;
line-height: 60px;
padding: 0 20px;
min-width: 100px;
transition: all .5s ease-in-out;
}
.menu>ul>li:hover>a{
background-color: #000;
}
.sub>ul>li {
border-bottom: 1px solid #777;
}
.sub>ul>li:last-child {
border-bottom: none;
}
.sub>ul {
list-style: none;
transform: translateY(-100%);
transition: all .5s ease-in-out;
}
.menu>ul>li:hover .sub{
height: auto;
}
.menu>ul>li:hover .sub>ul{
transform: translateY(0);
}
.sub{
position: absolute;
width : 100%;
height: 0;
overflow: hidden;
}
.sub>ul>li>a{
display: block;
background-color: #333;
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: bold;
line-height: 60px;
padding: 0 20px;
}
.sub>ul>li>a:hover{
background-color: #555;
}
案例參考:學習:純CSS製作二級下拉導航選單
相關文章
- CSS三級下拉導航選單詳解CSS
- 純CSS二級下拉導航選單實CSS
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- css滑鼠懸浮二級下拉導航選單CSS
- css水平下拉導航選單程式碼例項CSS
- jq+css+html打造下拉導航選單例項CSSHTML單例
- css三級下拉導航選單程式碼例項CSS
- 38 個免費開源的 CSS 下拉導航選單CSS
- JavaScript slide下拉導航選單效果JavaScriptIDE
- jQuery 淡入淡出效果下拉導航選單jQuery
- jquery二級下拉導航選單詳解jQuery
- 滑鼠懸浮緩慢下拉導航選單
- 二級下拉導航選單製作詳解
- javascript實現的三級下拉導航選單JavaScript
- jquery實現的點選二級下拉導航選單jQuery
- CSS垂直導航選單CSS
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- CSS 動態導航選單CSS
- CSS導航欄及下拉選單CSS
- CSS多級導航選單效果CSS
- CSS垂直三級導航選單CSS
- 純CSS打造淘寶導航選單欄CSS
- 純css製作導航下拉選單CSS
- CSS 平行四邊形導航選單CSS
- css簡單水平導航選單程式碼例項CSS
- CSS 可伸縮圓角導航選單CSS
- CSS3垂直摺疊導航選單CSSS3
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- CSS3橫向導航選單效果CSSS3
- jQuery css3環形導航選單jQueryCSSS3
- CSS3麵包屑導航選單CSSS3
- css3實現動態導航選單CSSS3
- css樹形導航選單程式碼例項CSS
- css3水平滑動導航選單效果CSSS3
- jquery頂部固定層下拉導航jQuery
- css實現立體效果橫向導航選單CSS
- CSS3 扇形導航選單程式碼例項CSSS3