CSS 鼠標放上去彈出列表是一種常見的 WEB 實現方式,可以在鼠標懸停時自動彈出下拉菜單,提高網站的用戶體驗。這種效果一般是通過 CSS 中的 hover 偽類來實現的。
.dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; } .dropdown:hover .dropdown-menu { display: block; }
上述代碼中,.dropdown 是需要綁定事件的元素,比如按鈕或導航條等。.dropdown-menu 是下拉菜單的容器,初始時將其隱藏。在 .dropdown:hover 時,通過 display: block 展示下拉列表中的菜單,達到選項列表彈出顯示的效果。
隨著 CSS 技術的不斷發展,還有很多實現下拉菜單的方式,如使用 JavaScript 或 jQuery 等庫,但使用純 CSS 實現下拉菜單的方法更加簡單,易于掌握。
上一篇css線條畫圓
下一篇css組件在屏幕水平居中