Advanced Search

Navigation Bar with out Submenus Using Html and CSS

/ Published in: CSS
Save to your folder(s)
The below is used to create a navigation bar without submenus using HTML and CSS

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <head>
  3. <title>Navigation Bar without Submenu Using Html and CSS</title>
  4. </head>
  5. <style>
  6. body{
  7. 	background-image:url(images1/bg.png)
  8. 	}
  9.  
  10. a{
  11. 	text-decoration:none;
  12. }
  13. #menu_holder{
  14. 	width:350px;
  15. 	height:30px;
  16. }
  17. #menu_holder ul {
  18. 	list-style-type:none;
  19. 	font-family: 'Merienda', cursive;
  20. 	font-size:12pt;
  21. 	color:#990000;
  22. 	padding:5px;
  23. }
  24. #menu_holder li {
  25. 	display:inline;
  26. 	color:#30C;
  27. 	padding:5px;
  28. }
  29. #menu_holder li a:hover{ 
  30. 	display:inline;
  31. 	color:#990000;
  32. 	font-size:12pt;
  33. 	padding:5px;
  34. 	border-bottom:solid 5px #e77918;
  35. }
  36. .active_menu{
  37. 	border-bottom:solid 3px #e77918;
  38. }
  39. </style>
  40. <body>
  41.  
  42.    <div id="menu_holder">
  43.      <ul>
  44.         <li><a href="#" class="active_menu">MENU 1</a></li>
  45.         <li><a href="#">MENU 2</a></li>
  46.         <li><a href="#">MENU 3</a></li>
  47.         <li><a href="#">MENU 4</a></li>
  48.       </ul>
  49.     </div>
  50.  
  51.  
  52. </body>
  53. </html>

URL: www.littleboycreations.com/navigation_bar.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.