tips4design css dropdown

by Cristy on December 31st, 2010

No notes

Syntax: CSS

Show lines - Hide lines - Show in textbox - Download

@charset "utf-8";
/* VISIT WWW.TIPS4DESIGNS.COM */

/* NAVBAR BACKGROUND & WIDTH */
#navbar {
	background-image:url(imagini/navbar/bg.png); /* the gradiented navbar background*/
	height:48px; /*total height of the navbar */
	width:100%; /*total width of the navbar */
	margin:0 auto 0 auto ; /* we center the navbar */
}

#nav-wrap{
	height:16px; /* the height of the buttons */
	margin:auto auto auto auto; /*center the wrapper */
	width:420px; /* set the width of the wrapper */
	padding-top:3px; /*vertical adjusment for the wrapper */
}

.button{
    float:left; /*so that the buttons we'll be on the same line */
	height:30px;
	width:100px;
	text-align:center; /* align the button's text to the center */
	margin:1px;
}

.button a{	/* edit how the links look inside the buttons */
  color:#8a8a8a; /*gray color */
  display:block; /* so that the entire button is clickable, not only the link */
  font-weight:bold;
  text-decoration:none; /* no under-line */
  margin-top:6px; /*verticaly align it*/
	
}

.button a:hover{ /* when you hover the mouse over the link */
	color:#09F; /* make it blue */
	margin-top:7px; /* move it 2px lower */
}

.button a:active{ /*when you click the link*/
	margin-top:9px;  /*make it red */
	color:#F60; /* move it 2 more px lower */
}

.button img { /* this is for the spacer */
	float:right; /* align the spacer to the right */
	margin-top:5px; /* verticaly align it*/
}
.drop{
	background-color:#F0F0F0;
	border:1px solid white;
	display: none; /* we don't show the drop-down div, we'll show it using jQuery */
	padding: 5px 0px 5px 0px;
	position:relative;
	top:0x;
	left:5px;
	width:200px;
    z-index:5; /* so that the drop-down div will be on top of everything */
	opacity:0.8; /* looks cooler with smaller opacity :D */
}

.drop ul{
	list-style-image:url(imagini/navbar/bullet.png); /* load the bullet image for the list element */
	list-style-type:circle; /* in case the line above doesn't work */
	margin:0px;
	text-align:left; /* align the text inside the drop-down to the let */
}

.drop ul a{ /*links inside the drop-down*/
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
}

.drop ul li:hover{ /* when you hover an option inside the drop-down */
	background-color:#FAFAFA; /* make the background-color lighter */
	list-style-image:url(imagini/navbar/bullet1.png); /* change the bullet image */
}

tips4design css dropdown

Leave a Reply