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


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.