Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <link href="style-nav.css" rel="stylesheet" >
- </head>
- <body>
- <header class="main-header">
- <a class="logo" href="#"></a>
- <ul class="main-nav">
- <li><a href="#">Home</a></li>
- <li><a href="#">About</a></li>
- <li class="dropdown">
- <a href="#">Work</a>
- <ul class="drop-nav">
- <li><a href="#">test</a></li>
- <li><a href="#">test</a></li>
- <li><a href="#">test</a></li>
- <li><a href="#">test</a></li>
- </ul>
- <li><a href="#">Contact</a></li>
- </ul>
- </header>
- </body>
- </html>
- Here is the style sheet:
- * {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- body {
- margin: 0;
- background: #ecf0f1;
- color: #fff;
- font-family: sans-serif;
- line-height: 1.5;
- }
- ul {
- list-style: none;
- padding: 0;
- margin: 0;
- }
- .main-header {
- margin: auto;
- min-height: 60px;
- padding: 1em 2em;
- border: 2px solid #2675a9;
- border-top: none;
- border-radius: 0 0 5px 5px;
- background: #2980b9;
- }
- .main-header:after {
- content: " ";
- display: table;
- clear: both;
- }
- .logo {
- display: block;
- text-decoration: none;
- float: left;
- margin-top: 5px;
- }
- .logo::before {
- color: #fff;
- content: "\e001";
- font-weight: normal;
- font-style: normal;
- font-size: 2.5em;
- font-family: "icomoon";
- -webkit-font-smoothing: antialiased;
- }
- /* Nav Demo Styles -------------------- */
- .main-nav,
- .drop-nav {
- background: #2c3e50;
- }
- .main-nav {
- float: right;
- border-radius: 4px;
- margin-top: 8px;
- border: solid 1px #1e2a36;
- }
- .main-nav > li {
- float: left;
- border-left: solid 1px #1e2a36;
- }
- .main-nav li:first-child {
- border-left: none;
- }
- .main-nav a {
- color: #fff;
- display: block;
- padding: 10px 30px;
- text-decoration: none;
- }
- /* Dropdown styles -------------------- */`
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement