Advanced Search

Horizontal Menu w/ Dropdowns

/ Published in: CSS
Save to your folder(s)
Basic style to set up Joomla-format menu as horizontal menu with dropdowns.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. #mainnav {
  2.  
  3. }
  4.  
  5.     #mainnav ul {
  6.         margin: 0;
  7. 		padding: 0;
  8.         list-style-type: none;
  9.     }
  10.  
  11.     #mainnav li {
  12.         float: left;
  13.         display: inline;
  14.         position: relative;
  15.         z-index: 15;
  16.     }
  17.  
  18.         #mainnav li a {
  19.             display: block;
  20.             font-size: 16px;
  21. 			line-height: 1em;
  22.             text-decoration: none;
  23.             padding: 12px;
  24.         }
  25.  
  26.         #mainnav .parent ul {
  27.         	position: absolute;
  28.         	z-index: 16;
  29.         	top: 40px;
  30.         	left: 0;
  31. 			display: none;
  32.         }
  33.  
  34.         	#mainnav .parent li {
  35.         		float: none;
  36.         		display: block;
  37. 				white-space: nowrap;
  38.         	}
  39.  
  40.         		#mainnav .parent li a {
  41.         			font-size: 14px;
  42.         			font-weight: normal;
  43.         			padding: 8px;
  44.         		}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.