整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html簡單的二級菜單制作


          級導航

          具體實現方法如下:

          首先在html中寫出一級菜單列表,然后在每個一級菜單中再嵌套一個列表即可創建一個二級菜單。

          index.html

          <div class="menu">
                  <ul>
                      <li><a href="">一級菜單</a>
                          <ul>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                          </ul>
                      </li>
                      <li><a href="">一級菜單</a>
                          <ul>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                          </ul>
                      </li>
                      <li><a href="">一級菜單</a>
                          <ul>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                          </ul>
                      </li>
                  </ul>
              </div>

          接著寫樣式文件,主要是對列表樣式和位置進行修改

          <style>
          	* {
          		padding: 0;/*內邊距:分別左,上,右,下都為0,這樣就不會出現左右上下內間距*/
          		margin: 0/*外邊距:分別左,上,右,下都為0,這樣就不會出現左右上下間距*/
          	}
          	
          	.menu ul li {
          		list-style: none;/*列表樣式*/
          		background-color: burlywood;/*背景顏色*/
          		width: 120px;/*寬度*/
          		text-align: center;/*文本對齊:居中*/
          		height: 40px;/*高度*/
          		position: relative/*定位:一般用這個就可以絕對定位*/
          	}
          	
          	.menu ul li a {
          		text-decoration: none;/*超鏈接下劃線:無*/
          		display: block;/*顯示:正常顯示用block,隱藏none*/
          		line-height: 40px
          	}
          	
          	.menu ul li:hover {
          		background-color: aqua
          	}
          	
          	.menu ul li ul {
          		display: none;
          		position: absolute;
          		left: 120px;
          		top: 0
          	}
          	
          	.menu ul li:hover ul {
          		display: block
          	}
          
          
          		</style>

          這里需要注意的是一級菜單列表的定位方式要設置為relative,二級菜單列表的定位方式要設置為absolute,這樣二級菜單才會在一級菜單相對的位置出現。

          然后通過display這個屬性控制二級菜單的顯示和隱藏就可以了。

          下一個文章:輪播圖

          合一些常用的實用導航菜單效果展示給小伙伴們,希望對大家有幫助!

          每個導航文字下面的下劃線會隨著鼠標的移上由左到右緩慢的過渡

          實現該效果的方法如下

          首先是html布局:

          css樣式:

          • 們先看一下最終效果。

          圖1

          一、開始吧,我們先做一個盒子drop,它以后要裝的是按鈕和下拉列表。

          圖2

          二、在盒子drop里面做一個按鈕dropbt。

          圖3

          圖4

          三、按鈕有點丑了,于是我們給按鈕加點樣式。

          圖5

          圖6

          四、下面我們做出下拉列表,它們是一串鏈接,我們用一個盒子dropbox裝著。

          圖7

          圖8

          五、列表是橫著的,而且不怎么好看,我們先改超鏈接a的樣式。

          圖9

          圖10

          六、菜單列表好看許多了,我們給列表盒子dropbox加點樣式,比如陰影。

          圖11

          圖12

          七、再好看的菜單列表一開始也是要先隱藏的。

          圖13

          圖14

          八、我們讓鼠標移到按鈕上時,按鈕顏色變淺。

          圖15

          圖16

          九、現在可以設置點擊后,下拉菜單出現了。

          圖17

          圖18

          十、下拉菜單出現了,但你會發現鼠標在右側時,菜單也會彈出來,我們改一下樣式,解決這個問題,再次移過去的時候,你會發現只有在按鈕位置才會彈出菜單了。

          圖19

          十一、完善一下,當鼠標移動菜單列表時,背景色改變。

          圖20

          圖21


          主站蜘蛛池模板: 一区视频在线播放| 亚洲一区在线视频观看| 亚洲色无码一区二区三区| 一区二区视频传媒有限公司| 日本欧洲视频一区| 国产伦精品一区二区三区在线观看| 日本精品夜色视频一区二区 | 亚洲丰满熟女一区二区哦| 一区二区国产在线观看| 国产日本亚洲一区二区三区| 上原亚衣一区二区在线观看| 日本免费一区二区在线观看| 一区二区视频在线免费观看| 亚洲熟妇成人精品一区| 精品国产亚洲一区二区三区| 一区二区三区在线播放| 日韩精品一区在线| 国产欧美一区二区精品仙草咪| 色噜噜AV亚洲色一区二区| 国产一区二区女内射| 麻豆AV无码精品一区二区| 日本免费一区二区久久人人澡| 国产亚洲一区区二区在线| 精品一区二区91| 一区二区三区免费视频网站| 国产精品视频免费一区二区三区| 影音先锋中文无码一区| 精品深夜AV无码一区二区| 无码人妻久久一区二区三区免费 | 久久精品一区二区三区日韩| 久久久久人妻一区精品 | 日本激情一区二区三区| 亚洲一本一道一区二区三区| 波多野结衣一区二区三区 | 国产福利一区二区在线视频 | 亚洲综合在线成人一区| 久久精品国产第一区二区| 肥臀熟女一区二区三区| 无码人妻精品一区二区三区66| 无码人妻精品一区二区三区66 | 久久综合九九亚洲一区|