Guest User

Vertical drop-down menu

a guest
Aug 22nd, 2017
1,992
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*** ESSENTIAL STYLES ***/
  2. .sf-contener {
  3. clear: both;
  4. }
  5. .sf-right {
  6.   float: right;
  7.   width: 7px;
  8. }
  9. .sf-menu, .sf-menu * {
  10. margin: 0;
  11. padding: 0;
  12. list-style: none;
  13. }
  14. .sf-menu {
  15. margin: 0 0;
  16. padding:0;
  17. width:100%;/* 980 */
  18. }
  19. .sf-menu ul {
  20. position: absolute;
  21. top: -999em;
  22. width: 10em; /* left offset of submenus need to match (see below) */
  23. text-align: left;
  24. }
  25. .sf-menu ul li {
  26. width: 100%;
  27. padding: 6px;
  28. }
  29. .sf-menu li:hover {
  30. visibility: inherit; /* fixes IE7 'sticky bug' */
  31. }
  32. .sf-menu li {
  33. float: left;
  34. position: relative;
  35. }
  36. .sf-menu a {
  37. display: block;
  38. position: relative;
  39. color:#fff;
  40. text-shadow:0 1px 0 #333;
  41. font-size: 18px;
  42. }
  43. .sf-menu li:hover ul,
  44. .sf-menu li.sfHover ul {
  45. left: 0;
  46. top: 34px; /* match top ul list item height */
  47. z-index: 99;
  48. width:auto
  49. }
  50. ul.sf-menu li:hover li ul,
  51. ul.sf-menu li.sfHover li ul {
  52. top: -999em;
  53. }
  54. ul.sf-menu li li:hover ul,
  55. ul.sf-menu li li.sfHover ul {
  56. left: 250px; /* match ul width */
  57. top: 0;
  58. }
  59. ul.sf-menu li li:hover li ul,
  60. ul.sf-menu li li.sfHover li ul {
  61. top: -999em;
  62. }
  63. ul.sf-menu li li li:hover ul,
  64. ul.sf-menu li li li.sfHover ul {
  65. left: 250px; /* match ul width */
  66. top: 0;
  67. }
  68.  
  69.  
  70. /*** DEMO SKIN ***/
  71. .sf-menu {
  72. float: left;
  73. margin-bottom: 1em;
  74. }
  75. .sf-menu a {
  76. display:block;
  77. margin-right:2px;
  78. padding: 0 22px 0 20px;
  79. line-height:34px;
  80. border: 0;
  81. text-decoration:none;
  82. }
  83. .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
  84. color: #fff;
  85. white-space:nowrap;
  86. }
  87. .sf-menu li li {
  88. background: rgba(113, 113, 113, 0.9);
  89. }
  90. .sf-menu li li li {
  91. background: rgba(113, 113, 113, 0.9);
  92. }
  93. .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  94.    background: #4E4E4E;
  95. }
  96. .sf-menu ul li:hover, .sf-menu ul li.sfHover,
  97. .sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
  98. background: #4e4e4e;
  99. outline: 0;
  100. }
  101. /*** arrows **/
  102. .sf-menu a.sf-with-ul {
  103. min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
  104. }
  105. .sf-sub-indicator {
  106. position: absolute;
  107. display: block;
  108. right: 10px;
  109. top: 1.05em; /* IE6 only */
  110. width: 10px;
  111. height: 10px;
  112. text-indent:  -999em;
  113. overflow: hidden;
  114. background: url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
  115. }
  116. a > .sf-sub-indicator {  /* give all except IE6 the correct values */
  117. top: 11px;
  118. background-position: 0 -100px; /* use translucent arrow for modern browsers*/
  119. }
  120. /* apply hovers to modern browsers */
  121. a:focus > .sf-sub-indicator,
  122. a:hover > .sf-sub-indicator,
  123. a:active > .sf-sub-indicator,
  124. li:hover > a > .sf-sub-indicator,
  125. li.sfHover > a > .sf-sub-indicator {
  126. background-position: -10px -100px; /* arrow hovers for modern browsers*/
  127. }
  128.  
  129.  
  130. /* point right for anchors in subs */
  131. .sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
  132. .sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
  133. /* apply hovers to modern browsers */
  134. .sf-menu ul a:focus > .sf-sub-indicator,
  135. .sf-menu ul a:hover > .sf-sub-indicator,
  136. .sf-menu ul a:active > .sf-sub-indicator,
  137. .sf-menu ul li:hover > a > .sf-sub-indicator,
  138. .sf-menu ul li.sfHover > a > .sf-sub-indicator {
  139. background-position: -10px 0; /* arrow hovers for modern browsers*/
  140. }
  141.  
  142.  
  143. /*** shadows for all but IE6 ***/
  144. .sf-shadow ul {
  145. background: url('../img/shadow.png') no-repeat bottom right;
  146. padding: 0 8px 9px 0;
  147. -moz-border-bottom-left-radius: 17px;
  148. -moz-border-top-right-radius: 17px;
  149. -webkit-border-top-right-radius: 17px;
  150. -webkit-border-bottom-left-radius: 17px;
  151. }
  152. .sf-shadow ul.sf-shadow-off {
  153. background: transparent;
  154. }
  155. li.sf-search {
  156.   background: inherit;
  157.   float: right;
  158.   line-height: 25px;
  159. }
  160. li.sf-search input {
  161.   -moz-border-radius: 0 5px 5px 0;
  162.   padding: 3px 0;
  163.   padding-left: 20px;
  164.   margin: 6px 6px 0 0;
  165.   background: #fff url('../img/search.gif') no-repeat left center;
  166.   border:1px solid #777
  167. }
  168.  
  169.  
  170. /* hack IE7 */
  171. .sf-menu a, .sf-menu a:visited {height:34px !IE;}
  172. .sf-menu li li {
  173. width:250px;
  174. background:#726f72 !IE;
  175. }
  176.  
  177.  @media screen and (max-width: 479px) {
  178. .sf-menu {
  179. margin: 0 0;
  180. padding:0;
  181. width:100%;/* 980 */
  182. }
  183. .sf-menu ul {
  184. position: absolute;
  185. top: -999em;
  186. width: 10em; /* left offset of submenus need to match (see below) */
  187. text-align: left;
  188. }
  189. .sf-menu ul li {
  190. width: 100%;
  191. padding: 6px;
  192. }
  193. .sf-menu li:hover {
  194. visibility: inherit; /* fixes IE7 'sticky bug' */
  195. }
  196. .sf-menu li {
  197. display: block;
  198. width: 100%;
  199. text-align: left;
  200. }
  201. .sf-menu a {
  202. display: block;
  203. color:#fff;
  204. text-shadow:0 1px 0 #333;
  205. font-size: 18px;
  206. }
  207.  
  208. @media screen and (min-width: 480px) and (max-width: 767px) {
  209.     .sf-menu a{
  210.         font-size: 14px;
  211.     }
  212.     .sf-menu li{
  213.         font-size: 14px;
  214.     }
  215. }
RAW Paste Data