Advanced Search

Horizontal Menu Css

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. #menu {
  2. 	position: relative;
  3. 	width: 900px;
  4. 	height: 40px;
  5. 	margin: 0px;
  6. 	padding: 0px;
  7. 	top: 0px;
  8. 	left: 0px;
  9. 	background-image: url('/images/meu-7.png');
  10. 	background-repeat: no-repeat;
  11. 	z-index: 99;
  12. 	clear: left;
  13. 	} 
  14. 		#menu-list-container {
  15. 			width: 100%;
  16. 			height: 28px;
  17. 			margin: 0;
  18. 			padding: 0;
  19. 			z-index: 99;
  20. 		}
  21. 			#menu-list-container ul {
  22. 				list-style: none;
  23. 				margin: 0px;
  24. 				margin-left: 30px;
  25. 				padding: 0px;
  26. 				color: #e5e8df;
  27. 				font-family: lucinda, Helvetica, Sans-Serif;
  28. 				font-size: 22px;
  29. 				z-index: 99;
  30. 			}
  31. 				#menu-list-container ul li {
  32. 					float: left;
  33. 					margin: 0;
  34. 					padding: 0;
  35. 					z-index: 99;
  36. 					} 
  37. 						#menu-list-container li a {
  38. 							display: block;
  39. 							height: 28px;
  40. 							padding-left: 35px;
  41. 							padding-right: 35px;
  42. 							padding-top: 12px;
  43. 							float: left;
  44. 							font-size: 70%;
  45. 							color: #FFFFFF;
  46. 							text-decoration: none;
  47. 							text-align: center;
  48. 							z-index: 99;
  49. 						} 
  50. 							#menu-list-container ul li a:hover {
  51. 								display: block;
  52. 								float: left;
  53. 								height: 28px;
  54. 								padding-left: 35px;
  55. 								padding-right: 35px;
  56. 								cursor: pointer;
  57. 								z-index: 99;
  58. 								background-image: url('/images/menu-active-bg2.png');
  59. 								background-repeat: repeat-x;
  60. 								}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.