|
|
| (3 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <head>
| |
| - | <style>
| |
| | | | |
| - | #main_content{
| |
| - | position: fixed;
| |
| - | top: 100px;
| |
| - | }
| |
| - |
| |
| - | nav {
| |
| - | padding: 0px 0px;
| |
| - | position: fixed;
| |
| - | top: 0px;
| |
| - | left: 0px;
| |
| - | right: 0px;
| |
| - | background: rgb(211,0,0);
| |
| - | box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
| |
| - | z-index: 9999;
| |
| - | }
| |
| - |
| |
| - | nav ul ul {
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | nav ul li:hover > ul {
| |
| - | display: block;
| |
| - | }
| |
| - |
| |
| - | nav ul {
| |
| - | background: rgb(211,0,0);
| |
| - | /*background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
| |
| - | background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
| |
| - | background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
| |
| - | box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
| |
| - | padding: 0 20px;*/
| |
| - | list-style: none;
| |
| - | position: relative;
| |
| - | display: inline-table;
| |
| - | margin-top: 0;
| |
| - | margin-bottom: 0;
| |
| - | }
| |
| - | nav ul:after {
| |
| - | content: ""; clear: both; display: block;
| |
| - | }
| |
| - |
| |
| - | nav ul li {
| |
| - | float: left;
| |
| - | }
| |
| - | nav ul li:hover {
| |
| - | background: rgb(162,40,40);
| |
| - | /*background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
| |
| - | background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
| |
| - | background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);*/
| |
| - | }
| |
| - | nav ul li:hover a {
| |
| - | color: #fff;
| |
| - | }
| |
| - |
| |
| - | nav ul li a {
| |
| - | display: block; padding: 25px 40px;
| |
| - | color: #fff; text-decoration: none;
| |
| - | font-family: "Times New Roman", Times, serif;
| |
| - | font-size: 24px;
| |
| - | font-weight: bold;
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - | nav ul ul {
| |
| - | background: rgba(196,101,96,0.9); border-radius: 0px; padding: 0;
| |
| - | position: absolute; top: 100%;
| |
| - | }
| |
| - | nav ul ul li {
| |
| - | float: none;
| |
| - | border-top: 1px solid rgba(255,255,255,0.3);
| |
| - | position: relative;
| |
| - | }
| |
| - |
| |
| - | nav ul ul li:hover {
| |
| - | background-color: rgba(227,123,119,0.9);
| |
| - | }
| |
| - |
| |
| - |
| |
| - | nav ul ul li a {
| |
| - | padding: 15px 40px;
| |
| - | font-size: 18px;
| |
| - | color: #fff;
| |
| - | }
| |
| - | /*nav ul ul li a:hover {
| |
| - | background: rgba(227,123,119,0.9);
| |
| - | }*/
| |
| - |
| |
| - |
| |
| - | nav ul ul ul {
| |
| - | position: absolute; left: 100%; top:0;
| |
| - | }
| |
| - |
| |
| - | </style>
| |
| - | </head>
| |
| - |
| |
| - | <body>
| |
| - | <nav>
| |
| - | <center>
| |
| - | <ul>
| |
| - | <li><a href="#">Home</a></li>
| |
| - | <li><a href="#">Tutorials</a>
| |
| - | <ul>
| |
| - | <li><a href="#">Photoshop</a></li>
| |
| - | <li><a href="#">Illustrator</a></li>
| |
| - | <li><a href="#">Web Design</a>
| |
| - | <ul>
| |
| - | <li><a href="#">HTML</a></li>
| |
| - | <li><a href="#">CSS</a></li>
| |
| - | </ul>
| |
| - | </li>
| |
| - | </ul>
| |
| - | </li>
| |
| - | <li><a href="#">Articles</a>
| |
| - | <ul>
| |
| - | <li><a href="#">Web Design</a></li>
| |
| - | <li><a href="#">User Experience</a></li>
| |
| - | </ul>
| |
| - | </li>
| |
| - | <li><a href="#">Inspiration</a></li>
| |
| - | </ul>
| |
| - | </center>
| |
| - | </nav>
| |
| - |
| |
| - | </body>
| |
| - |
| |
| - | </html>
| |
"
