tips4design css dropdown
No notes
Syntax:
CSS
@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 */ }