- <!DOCTYPE html>
- <html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta charset="UTF-8">
- <title>CSS3制作凤凰网导航|w3cplus</title>
- <meta name="keywords" content="css3学习,css3属性详解,css3 transition,如何学好css3">
- <meta name="description" content="W3CPLUS是一个前端爱好者的家园,W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创,以一起学习,一起进步,共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源,与前端爱好者一起共勉。">
- <link rel="shortcut icon" >
- *{
- margin: 0;
- padding: 0;
- }
- body {
- font-size: 12px;
- font-family: 'Covered By Your Grace', cursive;
- padding: 100px;
- }
- .container {
- width: 960px;
- margin: 0 auto;
- }
- /*menu style start*/
- #nav {
- width: 960px;
- margin: 50px auto;
- background: #8c319c;
- color: #fff;
- position:relative;
- box-shadow: -1px 0 0 #732184,-2px 0 0 #732184,-3px 0 0 #732184,-4px 0 0 #732184,-5px 0 0 #732184,-6px 0 0 #732184,-7px 0 0 #732184,-8px 0 0 #732184,-9px 0 0 #732184,-10px 0 0 #732184;
- border-top: 10px solid #000;
- float: left;
- width: 100%;
- }
- #nav::before {
- content:"";
- border: 5px solid #732184;
- border-color:#732184 #732184 #cecece #cecece;
- position: absolute;
- bottom: 0;
- left: -10px;
- width: 0;
- height: 0;
- display: block;
- z-index:2;
- }
- #nav::after {
- content:"";
- width: 10px;
- height: 9px;
- background: #000;
- position: absolute;
- top: -9px;
- left: -10px;
- display: block;
- }
- #nav li {
- float: left;
- display: inline;
- }
- #nav a {
- display: block;
- float: left;
- padding: 10px 15px;
- text-decoration: none;
- text-transform: uppercase;
- color: #fff;
- font-weight: bold;
- font-size: 24px;
- box-shadow: 2px 0 0 rgba(255,255,255,0.5);
- -webkit-transition: all 0.5s ease-in .218s;
- -moz-transition: all 0.5s ease-in .0038s;
- -o-transition: all 0.5s ease-in .0038s;
- transition: all 0.5s ease-in .0038s;
- }
- #nav .sub-menu {
- position: absolute;
- left: 0;
- top: 100%;
- background: #eff7f7;
- right: 0;
- box-shadow: -1px 0 0 #cecece,-2px 0 0 #cecece,-3px 0 0 #cecece,-4px 0 0 #cecece,-5px 0 0 #cecece,-6px 0 0 #cecece,-7px 0 0 #cecece,-8px 0 0 #cecece,-9px 0 0 #cecece,-10px 0 0 #cecece;
- }
- #nav .sub-menu::before {
- content:"";
- border: 5px solid #cecece;
- border-color:#cecece #cecece #fff #fff;
- position: absolute;
- bottom: 0;
- left: -10px;
- width: 0;
- height: 0;
- display: block;
- z-index:2;
- }
- #nav .sub-menu a {
- color: #000;
- font-size: 20px;
- font-weight: normal;
- }
- #nav a:hover,
- #nav .expansion a {
- background: #eff7f7;
- color: #000;
- box-shadow: 1px 0 0 #a5adad, 2px 0 0 #b5bdbd,3px 0 0 #a5adad;
- padding-top: 14px;
- margin-top: -4px;
- }
- #nav .sub-menu a {
- background: none;
- box-shadow: none;
- padding-top: 10px;
- margin-top: 0;
- }
- #nav .sub-menu a:hover {
- color: rgb(140, 49, 156);
- }
- </style>
- </head>
- <body>
- <div class="container">
- <h1>CSS3制作凤凰网导航</h1>
- <ul id="nav">
- <li><a href="#">Home</a></li>
- <li><a href="#">Blog</a></li>
- <li class="expansion">
- <a href="#">Tutorial</a>
- <ul class="sub-menu">
- <li><a href="#">css</a></li>
- <li><a href="#">css3</a></li>
- <li><a href="#">html</a></li>
- <li><a href="#">html5</a></li>
- <li><a href="#">jquery</a></li>
- <li><a href="#">javascript</a></li>
- <li><a href="#">php</a></li>
- </ul>
- </li>
- <li><a href="demo2.html">Demo</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- <p class="author" style="clear:both;padding-top: 50px;">作者:大漠-<a href="<a href="http://www.w3cplus.com/">http://www.w3cplus.com/" target="_blank">w3cplus</a><br>如有更好建议或疑问请加群:1041263</p>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/230420132974.html
来源: http://www.codesnippet.cn/detail/230420132974.html