<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>样式独特的纯CSS3自定义下拉菜单</title> <link href="https://fonts.googleapis.com/css?family=Raleway:200,400" rel="stylesheet"> <style> body { background: #ece5da; font-family: 'Raleway', sans-serif; } nav { margin: auto; margin-top: 40px; position: relative; width: 50vw; min-width: 320px; height: 200px; } nav h2 { border-radius: 2px; position: relative; background: tomato; height: 40px; text-transform: uppercase; color: ivory; font-weight: 200; display: flex; flex: 1; justify-content: center; align-items: center; box-shadow: 4px 4px 20px -2px rgba(0,0,0,.35); transition: all .4s; } nav:hover h2{ transform: translateY(-2px); box-shadow: 2px 2px 5px -1px rgba(0,0,0,.35); } nav:hover:active h2{ transform: translateY(10px); box-shadow: 0px -1px 2px 0px rgba(0,0,0,.35); } input { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; opacity: 0; cursor: pointer; height: 40px; } #toggle:checked ~ul { height: 0%; } nav ul { padding-left: 0; padding-top: 0; margin-top: 0; list-style: none; overflow: hidden; text-align: right; margin-bottom: 22px; text-align: center; transition: all .4s ease-out; height: 100%; } nav ul li { border-radius: 2px; position: relative; display: inline-block; margin-left: 35px; line-height: 1.5; width: 100%; margin: 0; margin-bottom: 5px; background: tomato; transition: background 3s; box-shadow: 2px 2px 10px -2px rgba(0,0,0,.35); } nav ul li:hover { background: mediumorchid; transition: background .45s; } /* nav ul li:hover a:active, li { color: tomato; } */ nav ul a { display: block; color: ivory; text-transform: lowercase; font-size: 18px; font-weight: 200; text-decoration: none; transition: color .3s; } </style> </head> <body> <div style="text-align:center;clear:both;"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> <nav> <h2>Drop Down Menu</h2> <input id="toggle" type="checkbox" checked> <ul> <li><a href="#">Section 01</a></li> <li><a href="#">Section 02</a></li> <li><a href="#">Section 03</a></li> <li><a href="#">Section 04</a></li> </ul> </nav> </body> </html>
样式独特的纯CSS3自定义下拉菜单
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
下一篇:
CSS3可调节并实时预览的阴影效果