纯CSS建立导航菜单之一

时间：2022-06-26 20:22:24
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>demo</title>
 5         <meta charset="UTF-8" />
 6         <style type="text/css">
 7             ul#navlist{
 8                 list-style-type:none;
 9             }
10             ul#navlist li{
11                 display:inline;
12             }
13             a{
14                 text-decoration:none;
15                 float:left;
16                 padding:10px;
17                 background-color:#2175bc;
18                 color:#FFF;
19                 
20             }
21             ul#navlist a:hover{
22                 background-color:#2586d7;
23                 margin-top:-2px;
24                 padding-bottom:12px;
25             }
26         </style>
27     </head>
28     <body>
29         <ul id="navlist">
30             <li><a href="#">HOME</a></li>
31             <li><a href="#">ARCHIVE</a></li>
32             <li><a href="#">CONTACT</a></li>
33         </ul>
34     </body>
35 </html>

这段代码最重要的部分便是:hover了，margin-top设置负值，使得元素位置向上移动，padding-bottom的设置则有两个方面的原因：一是填充掉底部空白的部分，二是使用padding使得填充部分可以为热点区域。

这种导航菜单可以改动:hover的padding-bottom的数值，如10px;\14px;，前者使得菜单有拉升感觉，后者则有向z的拉升突出感，如果加上box-shadow，应该会更好。

 

 

 

demo

标签：

相关文章