Advanced Search

Customized Drop Down jQuery Menu CSS2

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
  2. .sf-navbar {
  3. 	background:		transparent;
  4. 	height:			2em;
  5. 	position:		relative;
  6. }
  7. .sf-navbar li {
  8. 	background:		transparent;
  9. 	position:		static;
  10. }
  11. .sf-navbar a {
  12. 	border-top:		none;
  13. 	font-size: 		0.9em;
  14. }
  15. .sf-navbar li ul {
  16.     _width:			80em; /* critical for ie6 functionality*/
  17. }
  18. .sf-navbar li li {
  19. 	background:     transparent;
  20. 	position:		relative;
  21. }
  22. .sf-navbar li li ul {
  23. 	background:     #0971a6;
  24. 	width:			15em;
  25. }
  26. .sf-navbar li li li {
  27. 	width:			100%;
  28. }
  29. .sf-navbar ul li {
  30. 	width:			auto;
  31. 	float:			left;
  32. }
  33. .sf-navbar a, .sf-navbar a:visited {
  34. 	border:			none;
  35. 	color: 			#fff;
  36. }
  37.  
  38. .sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active, .sf-navbar a.active {
  39. 	border:			none;
  40. 	background:		transparent;
  41. 	color: 			#ffbe40;
  42. }
  43.  
  44. .sf-navbar li.current {
  45. 	background:		transparent;
  46. 	color: 			#ffbe40;
  47. }
  48.  
  49. .sf-navbar li:hover,
  50. .sf-navbar li.sfHover,
  51. .sf-navbar li li.current{
  52. 	background:		transparent;
  53. 	color: 			#ffbe40;
  54. 	font-size: 		1em;
  55. }
  56. .sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active, .sf-navbar a.current { font-family:Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold; color:#ffbe40;} {
  57. 	background:		transparent;
  58. 	color: 			#ffbe40;
  59. 	/*font-size: 		.8em;*/
  60. }
  61.  
  62. .sf-navbar ul li:hover,
  63. .sf-navbar ul li.sfHover,
  64. ul.sf-navbar ul li:hover li,
  65. ul.sf-navbar ul li.sfHover li{
  66. 	background:		transparent;
  67. 	color: 			#ffbe40;
  68. 	font-size: 		1em;
  69. }
  70.  
  71. ul.sf-navbar ul li a:active, 
  72. .sf-navbar ul li a:active
  73. .sf-navbar ul li li a:active {
  74. 	color: 			#ffbe40;
  75. }
  76.  
  77. ul.sf-navbar li li li:hover,
  78. ul.sf-navbar li li li.sfHover,
  79. .sf-navbar li li.current li.current,
  80. .sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover {
  81. 	background:		transparent;
  82. 	color: 			#ffbe40;
  83. }
  84. ul.sf-navbar .current ul,
  85. ul.sf-navbar ul li:hover ul,
  86. ul.sf-navbar ul li.sfHover ul {
  87. 	left:			0;
  88. 	top:			2em; /* match top ul list item height */
  89. }
  90. ul.sf-navbar .current ul ul {
  91. 	top: 			-999em;
  92. }
  93.  
  94. .sf-navbar li li.current > a {
  95. 	font-weight:	bold;
  96. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.