Advertisement
Guest User

Ex

a guest
Nov 16th, 2016
172
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.90 KB | None | 0 0
  1. <html>
  2. <head>
  3.   <link href="style-nav.css" rel="stylesheet" >
  4. </head>
  5. <body>
  6.   <header class="main-header">
  7.     <a class="logo" href="#"></a>
  8.     <ul class="main-nav">
  9.       <li><a href="#">Home</a></li>
  10.       <li><a href="#">About</a></li>
  11.       <li class="dropdown">
  12.       <a href="#">Work</a>
  13.         <ul class="drop-nav">
  14.           <li><a href="#">test</a></li>
  15.           <li><a href="#">test</a></li>
  16.           <li><a href="#">test</a></li>
  17.           <li><a href="#">test</a></li>
  18.         </ul>  
  19.       <li><a href="#">Contact</a></li>
  20.     </ul>
  21.   </header>
  22. </body>
  23. </html>
  24.  
  25. Here is the style sheet:
  26. * {
  27.   -moz-box-sizing: border-box;
  28.   box-sizing: border-box;
  29. }
  30. body {
  31.     margin: 0;
  32.     background: #ecf0f1;
  33.     color: #fff;
  34.     font-family: sans-serif;
  35.     line-height: 1.5;
  36. }
  37. ul {
  38.   list-style: none;
  39.   padding: 0;
  40.   margin: 0;
  41. }
  42. .main-header {
  43.   margin: auto;
  44.   min-height: 60px;
  45.   padding: 1em 2em;
  46.   border: 2px solid #2675a9;
  47.   border-top: none;
  48.   border-radius: 0 0 5px 5px;
  49.     background: #2980b9;
  50. }
  51.   .main-header:after {
  52.     content: " ";
  53.     display: table;
  54.     clear: both;
  55.   }
  56. .logo {
  57.     display: block;
  58.     text-decoration: none;
  59.   float: left;
  60.   margin-top: 5px;
  61. }
  62.   .logo::before {
  63.     color: #fff;
  64.     content: "\e001";
  65.     font-weight: normal;
  66.     font-style: normal;
  67.     font-size: 2.5em;
  68.     font-family: "icomoon";
  69.     -webkit-font-smoothing: antialiased;
  70.   }
  71.  
  72. /* Nav Demo Styles -------------------- */
  73.  
  74. .main-nav,
  75. .drop-nav {
  76.   background: #2c3e50;
  77. }
  78. .main-nav {
  79.   float: right;
  80.   border-radius: 4px;
  81.   margin-top: 8px;
  82.   border: solid 1px #1e2a36;
  83. }
  84.   .main-nav > li {
  85.     float: left;
  86.     border-left: solid 1px #1e2a36;
  87.   }
  88.   .main-nav li:first-child {
  89.     border-left: none;
  90.   }
  91.   .main-nav a {
  92.     color: #fff;
  93.     display: block;
  94.     padding: 10px 30px;
  95.     text-decoration: none;
  96.   }
  97.  
  98. /* Dropdown styles -------------------- */`
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement