HMTL/CSS——下拉菜单DEMO
生活随笔
收集整理的這篇文章主要介紹了
HMTL/CSS——下拉菜单DEMO
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果：?
?
?
代碼：?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>top_menu_DEMO</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}body{height:10000px;}a{text-decoration: none;color:aquamarine}#menu{width:100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;text-align: center;line-height: 30px;}#menu ul{width:100px; border: 1px solid; position: absolute;left: -1px;top:30px; background: white;display: none;}p{text-align: center;}#menu:hover ul{display:block; }#menu ul li:hover{background: gray;}</style> </head> <body><div id="menu">菜單<ul><li><a href="#">列表1</a></li><li><a href="#">列表2</a></li><li><a href="#">列表3</a></li><li><a href="#">列表4</a></li></ul></div><p>測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落</p> </body> </html>?
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的HMTL/CSS——下拉菜单DEMO的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML/CSS——float制作页面D
- 下一篇： CSS 基本样式