CSS3動態菜單可以為網站添加更多的交互性和生動性,讓用戶更加方便快捷地獲取到網站提供的內容。
.nav { display: flex; justify-content: space-between; align-items: center; background-color: #232323; padding: 10px; } .nav a { color: #fff; font-size: 16px; text-decoration: none; text-transform: uppercase; margin-right: 20px; transition: all 0.3s ease; } .nav a:hover { color: #8b8b8b; } .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; width: 150px; background-color: #fff; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); display: none; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu a { color: #232323; font-size: 14px; padding: 10px; display: block; text-decoration: none; } .dropdown-menu a:hover { background-color: #f2f2f2; }
以上是一個簡單的CSS3動態菜單的代碼,其中通過使用偽類:hover來實現鼠標懸停時的菜單展開和收縮效果。這個菜單還加入了下拉菜單功能,可以方便地展示子菜單。通過這個代碼,我們可以實現一個簡潔實用的網站導航菜單。