當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

二级菜单--竖排---HTML

發(fā)布時(shí)間：2025/3/19 HTML 18 豆豆

生活随笔收集整理的這篇文章主要介紹了二级菜单--竖排---HTML 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

二級(jí)菜單–豎排

這是作為回顧之前學(xué)習(xí)的東西
大家也可以康康作為一種回顧
二級(jí)菜單 —豎排
不足的地方請大家指出來
代碼照常都有詳細(xì)解釋

效果圖

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>二級(jí)菜單豎</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/secondaryMenu.css"> </head> <body ><div class="main"><ul><li> <a href="#">一級(jí)菜單</a><ul><li><a href="#">二級(jí)菜單</a></li></ul></li><li><a href="#">一級(jí)菜單</a><ul><li>二級(jí)菜單</li><li>二級(jí)菜單</li><li>二級(jí)菜單</li></ul></li><li><a href="#">一級(jí)菜單</a><ul><li>二級(jí)菜單</li><li>二級(jí)菜單</li><li>二級(jí)菜單</li></ul></li></ul></div> </body> </html>

下面是css代碼

body{font-size: 14px;color: black;background-color: #ccc;font-family: Arial, Helvetica, sans-serif,"微軟雅黑";line-height: 1.5; }  a{color: #00a1d6;text-align: center; } .main{width: 220px;border: 1px solid #eee;margin: 10px auto;box-sizing: border-box; } .main ul li{border: 1px solid #eee;line-height: 50px;height: 50px;background-color:#fff;position: relative;text-align: center;box-sizing: border-box; } .main ul li ul{display: none;position: absolute;left: 218px;top: -3px;width: 120px;height: 50px;border: 1px solid #ccc;box-sizing: border-box; }.main li:hover{background-color: #008c8c; }.main ul li:hover ul{display: block;border-right:none ; }

這里是用來作為一個(gè)簡單的回顧就沒有寫的特別詳細(xì) 有哪里不明白的話都可以在評論區(qū)講出來
重置代碼的話在我另外一篇博客上大家的要是不一樣的話可以去看一下。
謝謝啦

總結(jié)

以上是生活随笔為你收集整理的二级菜单--竖排---HTML的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

html
菜单