Advertisement
alchymyth

parrallel dropdown menu css

Aug 1st, 2011
349
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.21 KB | None | 0 0
  1. /* Menu Page
  2. -------------------------------------------------------------- */
  3.  
  4. #access {
  5.     background: #000;
  6.     display: block;
  7.     float: left;
  8.     margin: 0 auto;
  9.     padding-top: 50px;
  10.     width: 455px;
  11.     letter-spacing: 0.5em;
  12.     position: relative; /* EDIT */
  13. }
  14.  
  15.  
  16. #access .menu-header,
  17. div.menu {
  18.     font-size: 12px;
  19.     letter-spacing: 0.5em;
  20.     margin-left: 10px;
  21.     width: 455px;
  22. }
  23.  
  24. #access .menu-header ul,
  25. div.menu ul {
  26.     list-style: none;
  27.     margin: 0;
  28. }
  29.  
  30. #access .menu-header li,
  31. div.menu li {
  32.     float: left;
  33.     /* position: relative; EDIT */
  34. }
  35.  
  36.  
  37.  
  38. #access a {
  39.     color: #aaa;
  40.     display: inline;
  41.     line-height: 38px;
  42.     padding: 0 10px 0 20px;
  43.     text-decoration: none;
  44.     letter-spacing: 2px;
  45. /*  font-family: "Myriad Pro";
  46.     text-transform: uppercase;
  47. */
  48. }
  49.  
  50. #access ul ul {
  51.     /* float:left; EDIT */
  52.     display: none;
  53.     /* position: absolute; EDIT */
  54.     /* top: 20px; EDIT */
  55.     /* left: 5; EDIT */
  56.     /* float: left; EDIT */
  57.     /* width: 350px; EDIT */
  58.     padding-left: 20px; /* EDIT */
  59.     width: 435px; /* EDIT */
  60.     /*padding-top: 50px;*/ /* EDIT */ /*<--new edit*/
  61.     z-index: 99999;
  62.     list-style-type:none;
  63. }
  64.  
  65. #access ul ul li {
  66.     list-style:none;
  67.     display: inline;
  68.     /* min-width: 180px; EDIT */
  69.     float:left;
  70.     padding: 5px 5px; /* EDIT *//*<--new edit*/
  71.    
  72. }
  73. #access ul ul ul {
  74.     /* left: 100%; EDIT */
  75.     /* top: 5; EDIT */
  76.  
  77. }
  78. #access ul ul a {
  79.  
  80.     line-height: 0.5em;
  81.     padding: 5px;
  82.     /* width: 350px; EDIT */
  83.     height: auto;
  84.    
  85. }
  86. #access li:hover > a,
  87. #access ul ul :hover > a {
  88.  
  89.     color:#DB9029;
  90. }
  91.  
  92. #access ul li:hover > ul {
  93.     display: inline;
  94. position: absolute; /* EDIT */
  95. left: 0px; /* EDIT */
  96. top: 85px; /* EDIT */ /*<--new edit*/
  97.  
  98. /* block */
  99. }
  100. #access ul ul li:hover > ul { /*<--new*/
  101.     display: inline; /*<--new*/
  102. position: absolute; /*<--new*/
  103. left: 0px; /*<--new*/
  104. top: 25px; /*<--new*/
  105. } /*<--new*/
  106.  
  107. #access ul li.current_page_item > a,
  108. #access ul li.current-menu-ancestor > a,
  109. #access ul li.current-menu-item > a,
  110. #access ul li.current-menu-parent > a {
  111.     color: #fff;
  112. }
  113. * html #access ul li.current_page_item a,
  114. * html #access ul li.current-menu-ancestor a,
  115. * html #access ul li.current-menu-item a,
  116. * html #access ul li.current-menu-parent a,
  117. * html #access ul li a:hover {
  118.     color: #fff;
  119. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement