CSS是一種用于網頁樣式設計的語言,它可以幫助我們實現很多網頁效果。在這里我們將學習如何設置下拉按鈕樣式。
/* 下拉按鈕樣式 */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; } /* 下拉按鈕懸停樣式 */ .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } /* 下拉內容樣式 */ .dropdown { position: relative; display: inline-block; } /* 下拉內容懸停樣式 */ .dropdown:hover .dropdown-content { display: block; } /* 下拉內容正常樣式 */ .dropdown-content { display: none; position: absolute; z-index: 1; } /* 下拉內容鏈接樣式 */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* 下拉內容鏈接懸停樣式 */ .dropdown-content a:hover { background-color: #ddd; }
通過上面的CSS代碼,我們可以設置下拉按鈕及下拉內容的樣式,這樣就可以實現下拉菜單的效果了。