Stoffel

CSS Drop down menu

Mar 1st, 2012
144
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.67 KB | None | 0 0
  1. @charset "UTF-8";
  2.  
  3. #naviWrap
  4. {
  5. background-color:#000;
  6. background-color:rgba(0,0,0,0.5);
  7. margin:15px 0 0 0;
  8. }
  9. #topNavigation
  10. {
  11. border-left:1px solid rgba(255,255,255,0.25);
  12. margin:0 auto;
  13. width:960px;
  14. }
  15. #topNavigation ul
  16. {
  17. margin: 0;
  18. padding: 0;
  19. list-style: none;
  20.  
  21. }
  22. #topNavigation li
  23. {
  24. position: relative;
  25. border-left:1px solid rgba(0,0,0,0.25);
  26. border-right:1px solid rgba(255,255,225,0.25);
  27. display:inline-block;
  28. height:60px;
  29. line-height:60px;
  30. text-align:center;
  31. }
  32. #topNavigation li a /*tekst in list items uit het hoofdmenu */
  33. {
  34. color:#fff;
  35. display:block;
  36. font-size:11px;
  37. height:60px;
  38. padding:0 30px;
  39. text-decoration:none;
  40. text-transform:uppercase;
  41. font-style: italic;
  42. font-weight:bold;
  43. }
  44. #topNavigation li a:hover  /*De list item tekst waar er over gehovered wordt*/
  45. {
  46. background-color:#000;
  47. background-color:rgba(0,0,0,0.2);
  48.  
  49. text-decoration:underline;
  50. }
  51.  
  52. #topNavigation li.current
  53. {
  54. background-color:#000;
  55. background-color:rgba(0,0,0,0.5);
  56. }
  57. #topNavigation li:hover ul li
  58. {
  59. display: block;
  60.  
  61. }
  62.  
  63. #topNavigation li ul li:hover
  64. {
  65.  
  66. background-color:rgba(0,0,0,0.8);
  67. display:block;
  68. }
  69.  
  70. #topNavigation li li /*de list items uit de sub menus*/
  71. {
  72. border-style: none;
  73. position: absolute;
  74. display: none;
  75. float: auto;
  76. background-color:rgba(0,0,0,0.8);
  77.  
  78. }
  79.  
  80. #topNavigation li ul
  81. {
  82.     position: absolute;
  83.     left: 0px;
  84.     top: 60px;
  85.     display: inline-block;
  86. }
  87. #topNavigation ul li
  88. {
  89.  
  90.  position: relative;
  91.  
  92.  }
  93.  #topNavigation ul ul {
  94.  visibility: hidden;
  95.  position: absolute;
  96.  top: 100%;
  97.  left: 0;
  98.  z-index: 598;
  99.  width: 100%;
  100. }
  101. #topNavigation li ul:hover li
  102. {
  103. display:block;
  104. }
Advertisement
Add Comment
Please, Sign In to add comment