CSS彈出式菜單是網頁設計中常用的一種交互方式。下面是一個使用CSS實現的簡單的彈出式菜單代碼示例:
/*菜單樣式*/ .menu { display: none; /*默認不顯示*/ position: absolute; /*絕對定位*/ z-index: 1; /*設置層級*/ background-color: #f1f1f1; /*背景色*/ min-width: 120px; /*最小寬度*/ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /*投影效果*/ } /*菜單項樣式*/ .menu a { color: black; /*字體顏色*/ padding: 12px 16px; /*內邊距*/ text-decoration: none; /*去除下劃線*/ display: block; /*塊級元素*/ } /*鼠標懸停在菜單項上的樣式*/ .menu a:hover { background-color: #ddd; /*背景色*/ } /*鼠標懸停在菜單容器上時,顯示菜單*/ .container:hover .menu { display: block; } /*容器樣式*/ .container { display: inline-block; /*內聯塊級元素*/ position: relative; /*相對定位*/ } /*箭頭樣式*/ .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(45deg); /*旋轉45度*/ position: absolute; /*絕對定位*/ right: 10px; /*距離右邊框10px*/ top: 50%; /*垂直居中*/ margin-top: -3px; /*向上移動3px*/ }
以上是一個基本的彈出式菜單代碼實現,通過鼠標懸停在目標元素容器上,讓菜單顯示出來。希望對大家有幫助。
上一篇css彈出框居中
下一篇css 3d pre