Result: html <nav id="nav-1"> <a class="link-1" href="#">Home</a> <a class="link-1" href="#">About</a> <a class="link-1" href="#">Contact</a> <a class="link-1" href="#">Shop</a> </nav> <nav id="nav-2"> <a class="link-2" href="#">Home</a> <a class="link-2" href="#">About</a> <a class="link-2" href="#">Contact</a> <a class="link-2" href="#">Shop</a> </nav> <nav id="nav-3"> <a class="link-3" href="#">Home</a> <a class="link-3" href="#">About</a> <a class="link-3" href="#">Contact</a> <a class="link-3" href="#">Shop</a> </nav> CSS @import url(https://fonts.googleapis.com/css?family=Raleway); body { margin: 0px; } nav { margin-top: 40px; padding: 24px; text-align: center; font-family: Raleway; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } #nav-1 { background: #3fa46a; } #nav-2 { background: #5175C0; } #nav-3 { background: #EEA200; } .link-1 { transition: 0.3s ease; background: #3fa46a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 4px solid #3fa46a; border-bottom: 4px solid #3fa46a; padding: 20px 0; margin: 0 20px; } .link-1:hover { border-top: 4px solid #ffffff; border-bottom: 4px solid #ffffff; padding: 6px 0; } .link-2 { transition: 0.6s; color: #ffffff; font-size: 20px; text-decoration: none; border-right: 2px dotted transparent; padding: 30px 8px 0 10px; margin: 0 10px; } .link-2:hover { border-right: 2px dotted #ffffff; padding-bottom: 24px; } .link-3 { transition: 0.4s; color: #ffffff; font-size: 20px; text-decoration: none; padding: 0 10px; margin: 0 10px; } .link-3:hover { background-color: #ffffff; color: #EEA200; padding: 24px 10px; } The above is the details of how to achieve menu hover effect with CSS3. For more information about CSS3 menu hover, please pay attention to other related articles on 123WORDPRESS.COM! |
<<: Analysis and solution of the reasons why HTML external reference CSS files are not effective
>>: Implementation example of Docker deployment of front-end and back-end separation projects
Requirement: When displaying data in a list, ther...
Counting the size of each table in each database ...
challenge: Converts the characters &, <, &...
Take the deployment of https://gitee.com/tengge1/...
I recently deployed MySQL 5.6 and found that by d...
I have previously shared the usage of asynchronou...
first step: In VMware, click "Edit" - &...
Table of contents Optimizing sorting queries Avoi...
User namespace is a new namespace added in Linux ...
Table of contents 1. Backup 1.1 Fully prepared 1....
Think big and small, then redirect. Sometimes Lin...
Every time after installing the system, I have to...
This is a large drop-down menu implemented purely...
Unzip the Maven package tar xf apache-maven-3.5.4...
1. Conclusion Syntax: limit offset, rows Conclusi...