生活随笔
收集整理的這篇文章主要介紹了
顶部导航栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML和CSS實現頂部導航欄，二級菜單的實現。
原理分析：
1.使用ul(無需列表)嵌套ul(無序列表)
2.鼠標放上改變背景顏色
3.二級菜單的顯示
效果演示：
初始樣式
鼠標放上
代碼演示
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8" /><title
></title
></head
><style type
="text/css">.top
{height
: auto;width
: 100%;margin
-left
: 0;background
: skyblue
;position
: fixed
;top
: 0;margin
-bottom
: 5px
;}.top ul
{width
: auto;list
-style
-type
: none
;white
-space
: nowrap
;overflow
: hidden
;margin
-left
: 5%;padding
: 0;}.top li
{float: left
;margin
-right
: 2%;position
: relative
;overflow
: hidden
;}.top li a
{display
: block
;color
: white
;text
-align
: center
;padding
: 3px
;overflow
: hidden
;text
-decoration
: none
;}.top li a
:hover
{background
-color
: lightyellow
;color
: black
;}.top ul li ul
{margin
-left
: -0.2px
;background
: skyblue
;position
: relative
;display
: none
;}.top ul li ul li
{float: none
;text
-align
: center
;}.top ul li
:hover ul
{display
: block
;}body
{background
: #eff3f5
;}</style
><body
><div
class="top"><center
><ul
><li
><a href
="#">一級菜單
</a
><ul
><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
></ul
></li
><li
><a href
="#">一級菜單
</a
><ul
><li
><a href
="#">二級菜單
</a
></li
><li
><a href
="#">二級菜單
</a
></li
></ul
></li
><li
><a href
="#"><b
>一級菜單
</b
><ul
><li
><a href
="#">二級菜單
</a
></li
><li
><a href
="#">二級菜單
</a
></li
></ul
></a
></li
><li
><a href
="#">一級菜單
</a
><ul
><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
></ul
></li
><li
><a href
="#">一級菜單
</a
><ul
><li
><a href
="#">二級菜單
</a
></li
><li
><a href
="#">二級菜單
</a
></li
></ul
></li
></ul
></center
></div
></body
>
</html
>
總結
以上是生活随笔為你收集整理的顶部导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
