HTML 實現導航欄帶有子列表
阿新 • • 發佈:2018-11-23
這段時間,在學習前端,特此做個筆記。
<!--導航欄-->
<div class="titlediv">
<img class="logo" src="../res/logo.png">
<ul class="titlediv_ul">
<li class="drop-down">
<a href="#ruanjian"> 電腦軟體</a>
<ul class="drop-down-content" >
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
<li class="drop-down" ><a href="#ruanjian"> 驅動下載</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a> </li>
</ul>
</li>
<li class="drop-down"><a href="#ruanjian"> 網管租賃</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
<li class="drop-down"><a href="#ruanjian"> 軟體寶庫</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
<li class="drop-down"><a href="#ruanjian"> 官方論壇</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
</ul>
</div>
css裡面
/*導航欄*/
.titlediv {
background-color: white;
height: 60px;
width: 100%;
float: left;
padding: 0px;
text-align: center; /*字型居中*/
margin: auto;
}
.logo {
width: auto;
float: left;
height: auto;
margin-left: 50px;
}
.titlediv_ul {
list-style-image: url(img/5.jpg);
list-style-type: none; /*隱藏點*/
margin: 0;
margin-left: 100px;
padding: 0;
float: left;
}
.titlediv_ul > li {
/*white-space: nowrap;*/
/*橫向*/
float: left;
}
.drop-down > a {
display: block; /*設定塊級*/
width: 100px;
line-height: 60px; /*保證文字垂直居中*/
font-size: 14px;
color: #000000;
text-decoration: none;
}
/*懸浮效果*/
.drop-down > a:hover {
color: #60baed;
}
/*下拉選單*/
.drop-down {
/*position: relative;*/
/* white-space: nowrap;!**!*/
}
.drop-down-content {
padding: 0;
display: none; /*1 先隱藏*/
}
.drop-down-content > li {
list-style-type: none; /*去點樣式*/
}
.drop-down:hover .drop-down-content {
display: block; /*2顯示*/
background-color: #60baed;
}
.drop-down-content > li > a {
display: block; /*設定塊級*/
width: 100px;
line-height: 60px; /*保證文字垂直居中*/
font-size: 14px;
color: #110d06;
text-decoration: none;
}
.drop-down-content > li > a:hover {
color: #e5f4fd;
}