Advertisement
joseph94

mega menu prive CSS

Feb 6th, 2012
449
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.64 KB | None | 0 0
  1. #menu{
  2.     list-style:none;
  3.     width:560px;
  4.     margin:34px auto 0px auto;
  5.     height:40px;
  6.     padding:0px 20px 0px 20px;
  7. }
  8. #menu li{
  9.     float:left;
  10.     display:block;
  11.     text-align:center;
  12.     position:relative;
  13.     padding:4px 12px 4px 12px;
  14.     margin-right:50px;
  15.     margin-top:0;/*Forces each list item down*/
  16.     border:2px solid #F0F0F0;
  17.     border-bottom:none;
  18. }
  19. #menu li:hover{
  20.     border:2px solid #F0F0F0;
  21.     padding:4px 12px 4px 12px;/*Must match #menu li padding*/
  22.     border-bottom:none;
  23. }
  24. #menu li a {
  25.     font-size:14px;
  26.     color:#000;
  27.     display:block;
  28.     outline:0;
  29.     text-decoration:none;
  30. }
  31. #menu li:hover a {  
  32.     color:#161616;
  33. }
  34. .dropdown_1column,
  35. .dropdown_2columns,
  36. .dropdown_3columns,
  37. .dropdown_4columns{
  38.     margin:4px auto;
  39.     position:absolute;
  40.     left:-999em; /* Hides the drop down */
  41.     text-align:left;
  42.     padding:10px 5px 10px 5px;
  43.     border:2px solid #F0F0F0;
  44.     border-top:none;
  45.     background:#FFF;
  46. }
  47. .dropdown_1column {width: 140px;}
  48. .dropdown_2columns {width: 280px;}
  49. .dropdown_3columns {width: 420px;}
  50. .dropdown_4columns {width: 560px;}
  51. .dropdown_5columns {width: 700px;}
  52. #menu li:hover .dropdown_1column,
  53. #menu li:hover .dropdown_2columns,
  54. #menu li:hover .dropdown_3columns,
  55. #menu li:hover .dropdown_4columns,
  56. #menu li:hover .dropdown_5columns {
  57.     left:-1px;top:auto;
  58. }
  59. .col_1,
  60. .col_2,
  61. .col_3,
  62. .col_4,
  63. .col_5 {
  64.     display:inline;
  65.     float: left;
  66.     position: relative;
  67.     margin-left: 5px;
  68.     margin-right: 5px;
  69. }
  70. .col_1 {width:130px;}
  71. .col_2 {width:270px;}
  72. .col_3 {width:410px;}
  73. .col_4 {width:550px;}
  74. .col_5 {width:690px;}
  75. #menu .menu_right {
  76.     float:right;
  77.     margin-right:0px;
  78. }
  79. #menu li:hover .align_right {
  80.     left:auto;
  81.     right:-1px;
  82.     top:auto;
  83. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement