Advanced Search

Hover Menu HTML

/ Published in: HTML
Save to your folder(s)
Index1.html

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>Dynamic Hover Menu</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="masterstylesheet.css" type="text/css">
  8. </head>
  9. <body>
  10. <div class="masthead">
  11. 	<h1 class="header"><a href="index1.html">Co Name</a></h1>
  12. 	<nav class="navbar" role="navigation">
  13. 		<ul>
  14. 			<li><a href="index1.html">Link 8</a></li>
  15. 			<li><a href="index1.html">Link 7</a></li>
  16. 			<li><a href="index1.html">Link 6</a></li>
  17. 			<li><a href="index1.html">Home</a></li>
  18. 		</ul>
  19. 	</nav>
  20. </div>
  21. <div class="face">
  22. 	<div class="bodylinks">
  23. 		<a href="index1.html">Body Link 1</a>
  24. 		<a class="active" href="index1.html">Body Link 2</a> <!-- class "active" to show how active link will look -->
  25. 		<a href="index1.html">Body Link 3</a>
  26. 		<a href="index1.html">Body Link 4</a>
  27. 		<a href="index1.html">Body Link 5</a>
  28. 	</div>
  29. 	<article class="content">  <!-- Random Text Follows -->
  30. 		<header>
  31. 			<h3>
  32. 			Home Page
  33. 			</h3>
  34. 		</header>		
  35. 		<p></p>
  36. 		<p>
  37. 		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
  38. 		</p>
  39. 		<p>
  40. 		Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
  41. 		</p>
  42. 		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
  43. 		<p>
  44. 		Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
  45. 		</p>
  46. 		<p>
  47. 		Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
  48. 		</p>
  49. 		<p>
  50. 		Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
  51. 		</p>
  52. 		<p>
  53. 		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
  54. 		</p>
  55. 		<p>
  56. 		Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
  57. 		</p>
  58. 		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
  59. 		<p>
  60. 		Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
  61. 		</p>
  62. 		<p>
  63. 		Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
  64. 		</p>
  65. 		<p>
  66. 		Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
  67. 		</p>
  68. 		<p>
  69. 		Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  70. 		</p>
  71. 		<footer>
  72. 		Nunc ac magna. Maecenas odio dolors.
  73. 		</footer>
  74. 	</article>
  75. </div>
  76. <div class="pagefooter">
  77. 	<nav class="bottomnavbar">
  78. 		<ul>
  79. 			<li><a href="index1.html">|| Home |</a></li>
  80. 			<li><a href="index1.html">| Link 1 |</a></li>
  81. 			<li><a href="index1.html">| Link 2 |</a></li>
  82. 			<li><a href="index1.html">| Link 3 |</a></li>
  83. 			<li><a href="index1.html">| Link 4 |</a></li>
  84. 			<li><a href="index1.html">| Link 5 |</a></li>
  85. 			<li><a href="index1.html">| Link 6 |</a></li>
  86. 			<li><a href="index1.html">| Link 7 |</a></li>
  87. 			<li><a href="index1.html">| Link 8 ||</a></li>
  88. 		</ul>
  89. 	</nav>
  90. 	<article class="copyright"> <!-- Random Copyright text -->
  91. 		© Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin semper, ante vitae sollicitudin posuere, metus quam iaculis nibh, vitae scelerisque nunc massa eget pede. Sed velit urna, interdum vel, ultricies vel, faucibus at, quam.
  92. 	</article>
  93. </div>
  94. </body>
  95. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.