side drop down menu April 02, 2015 Get link Facebook Twitter Pinterest Email Other Apps Create index.html <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>side drop down menu</title> <style> html { background: #333; min-height: 100%; font-family: "Open Sans", sans-serif; font-weight: 300; color: #FFF; } body, html { height: 100%; margin: 0; padding: 0; } a { color: rgba(255, 255, 255, 0.6); text-decoration: none; } a:hover, li:hover > a { color: #FFF; } ul { list-style-type: none; margin: 0; padding: 0; } li { margin: 0; padding: 0; } #menu { border-left: 1px solid #FFF; border-right: 1px solid #FFF; background: rgba(0, 0, 0, 0.5); float: left; font-size: 1.5em; min-height: 100%; margin-left: 1em; } #menu li { position: relative; z-index: 1; } #menu li a { display: block; padding: 0.5em 1em; white-space: nowrap; } #menu li ul { position: absolute; overflow: hidden; display: none; left: 100%; top: 0.5em; float: none; background-image: -moz-radial-gradient(0 50%, ellipse farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%); background-image: -webkit-radial-gradient(0 50%, ellipse farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%); background-image: radial-gradient(0 50%, ellipse farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%); } #menu li:hover ul { display: block; } #menu li ul a { position: relative; font-size: 0.8em; } #menu li ul a:hover:before { content: ""; display: block; width: 1em; height: 1em; background: rgba(0,0,0,0.75); border: 1px solid #FFF; position: absolute; top: 0.5em; left: -0.75em; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } </style> </head> <body> <ul id="menu"> <li> <a href="#">HOME</a> <ul> <li> <a href="#">Link 1</a> </li> <li> <a href="#">Link 2</a> </li> <li> <a href="#">Link 3</a> </li> </ul> <li> <li> <a href="#">ABOUT</a> <ul> <li> <a href="#">Link 1</a> </li> <li> <a href="#">Link 2</a> </li> <li> <a href="#">Link 3</a> </li> <li> <a href="#">Link 4</a> </li> </ul> <li> <li> <a href="#">Product</a> <ul> <li> <a href="#">Link 1</a> </li> <li> <a href="#">Link 2</a> </li> <li> <a href="#">Link 3</a> </li> <li> <a href="#">Link 4</a> </li> <li> <a href="#">Link 5</a> </li> </ul> <li> <li> <a href="#">Services</a> <ul> <li> <a href="#">Link 1</a> </li> <li> <a href="#">Link 2</a> </li> <li> <a href="#">Link 3</a> </li> <li> <a href="#">Link 4</a> </li> <li> <a href="#">Link 5</a> </li> <li> <a href="#">Link 6</a> </li> </ul> <li> </ul> </body> </html> Comments
Comments
Post a Comment