tips4design css dropdown

by Cristy on December 31st, 2010
No notes
Syntax: CSS
Show lines - Hide lines - Show in textbox - Download
  1. @charset "utf-8";
  2. /* VISIT WWW.TIPS4DESIGNS.COM */
  3.  
  4. /* NAVBAR BACKGROUND & WIDTH */
  5. #navbar {
  6. background-image:url(imagini/navbar/bg.png); /* the gradiented navbar background*/
  7. height:48px; /*total height of the navbar */
  8. width:100%; /*total width of the navbar */
  9. margin:0 auto 0 auto ; /* we center the navbar */
  10. }
  11.  
  12. #nav-wrap{
  13. height:16px; /* the height of the buttons */
  14. margin:auto auto auto auto; /*center the wrapper */
  15. width:420px; /* set the width of the wrapper */
  16. padding-top:3px; /*vertical adjusment for the wrapper */
  17. }
  18.  
  19. .button{
  20. float:left; /*so that the buttons we'll be on the same line */
  21. height:30px;
  22. width:100px;
  23. text-align:center; /* align the button's text to the center */
  24. margin:1px;
  25. }
  26.  
  27. .button a{ /* edit how the links look inside the buttons */
  28. color:#8a8a8a; /*gray color */
  29. display:block; /* so that the entire button is clickable, not only the link */
  30. font-weight:bold;
  31. text-decoration:none; /* no under-line */
  32. margin-top:6px; /*verticaly align it*/
  33.  
  34. }
  35.  
  36. .button a:hover{ /* when you hover the mouse over the link */
  37. color:#09F; /* make it blue */
  38. margin-top:7px; /* move it 2px lower */
  39. }
  40.  
  41. .button a:active{ /*when you click the link*/
  42. margin-top:9px; /*make it red */
  43. color:#F60; /* move it 2 more px lower */
  44. }
  45.  
  46. .button img { /* this is for the spacer */
  47. float:right; /* align the spacer to the right */
  48. margin-top:5px; /* verticaly align it*/
  49. }
  50. .drop{
  51. background-color:#F0F0F0;
  52. border:1px solid white;
  53. display: none; /* we don't show the drop-down div, we'll show it using jQuery */
  54. padding: 5px 0px 5px 0px;
  55. position:relative;
  56. top:0x;
  57. left:5px;
  58. width:200px;
  59. z-index:5; /* so that the drop-down div will be on top of everything */
  60. opacity:0.8; /* looks cooler with smaller opacity :D */
  61. }
  62.  
  63. .drop ul{
  64. list-style-image:url(imagini/navbar/bullet.png); /* load the bullet image for the list element */
  65. list-style-type:circle; /* in case the line above doesn't work */
  66. margin:0px;
  67. text-align:left; /* align the text inside the drop-down to the let */
  68. }
  69.  
  70. .drop ul a{ /*links inside the drop-down*/
  71. font-family:Tahoma, Geneva, sans-serif;
  72. font-size:14px;
  73. font-weight:bold;
  74. text-decoration:none;
  75. }
  76.  
  77. .drop ul li:hover{ /* when you hover an option inside the drop-down */
  78. background-color:#FAFAFA; /* make the background-color lighter */
  79. list-style-image:url(imagini/navbar/bullet1.png); /* change the bullet image */
  80. }

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS