CSS圓角下拉菜單是網頁設計中常用的菜單樣式之一。它可以讓網頁看起來更加美觀,同時也提高了用戶體驗。下面是一個簡單的實現例子。
ul { list-style: none; padding: 0; margin: 0; } li { position: relative; display: inline-block; cursor: pointer; padding: 12px 20px; background-color: #353535; color: #fff; } li:hover { background-color: #464646; } li ul { position: absolute; top: 50px; left: 0; width: 200px; background-color: #464646; border-radius: 0 0 5px 5px; padding: 0; margin: 0; display: none; } li:hover ul { display: block; } li ul li { display: block; padding: 10px; text-align: left; border-bottom: 1px solid #fff; } li ul li:last-child { border-bottom: none; } li ul li:hover { background-color: #353535; }
代碼中,我們首先定義了菜單的樣式,包括背景顏色、文字顏色和鼠標懸浮樣式等。然后,我們使用CSS布局的特性,使得當用戶懸浮在菜單上方時,菜單項下方的下拉菜單會出現。
注意到在代碼中我們使用了border-radius
屬性,用來設置菜單項與下拉菜單的圓角。這是實現圓角下拉菜單的關鍵之一。
最后,我們還可以根據需求對菜單和下拉菜單的其他樣式進行調整,以滿足實際需求。
上一篇python盜號源碼
下一篇css圖片點擊停止旋轉