當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時間：2025/3/19 HTML 34 豆豆

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

二級菜單–豎排

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

效果圖

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
菜单

上一篇： Request转发---应用
下一篇： HTML--猫眼电影---浮动练习