CSS 23
Superfish-navbar.css Guest on 3rd May 2021 04:44:30 AM
  1.  
  2. /*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
  3. .sf-navbar {
  4.     background:     #BDD2FF;
  5.     height:         2.5em;
  6.     padding-bottom: 2.5em;
  7.     position:       relative;
  8. }
  9. .sf-navbar li {
  10.     background:     #ccc;
  11.     position:       static;
  12. }
  13. .sf-navbar a {
  14.     border-top:     none;
  15. }
  16. .sf-navbar li ul {
  17.     width:          44em; /*IE6 soils itself without this*/
  18. }
  19. .sf-navbar li li {
  20.     background:     #BDD2FF;
  21.     position:       relative;
  22. }
  23. .sf-navbar li li ul {
  24.     width:          13em;
  25. }
  26. .sf-navbar li li li {
  27.     width:          100%;
  28. }
  29. .sf-navbar ul li {
  30.     width:          auto;
  31.     float:          left;
  32. }
  33. .sf-navbar a, .sf-navbar a:visited {
  34.     border:         none;
  35. }
  36. .sf-navbar li.current {
  37.     background:     #BDD2FF;
  38. }
  39. .sf-navbar li:hover,
  40. .sf-navbar li.sfHover,
  41. .sf-navbar li li.current,
  42. .sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active {
  43.     background:     #BDD2FF;
  44. }
  45. .sf-navbar ul li:hover,
  46. .sf-navbar ul li.sfHover,
  47. ul.sf-navbar ul li:hover li,
  48. ul.sf-navbar ul li.sfHover li,
  49. .sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active {
  50.     background:     #D1DFFF;
  51. }
  52. ul.sf-navbar li li li:hover,
  53. ul.sf-navbar li li li.sfHover,
  54. .sf-navbar li li.current li.current,
  55. .sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover, .sf-navbar ul li li a:active {
  56.     background:     #E6EEFF;
  57. }
  58. ul.sf-navbar .current ul,
  59. ul.sf-navbar ul li:hover ul,
  60. ul.sf-navbar ul li.sfHover ul {
  61.     left:           0;
  62.     top:            2.5em; /* match top ul list item height */
  63. }
  64. ul.sf-navbar .current ul ul {
  65.     top:            -999em;
  66. }
  67.  
  68. .sf-navbar li li.current > a {
  69.     font-weight:    bold;
  70. }
  71.  
  72. /*** point all arrows down ***/
  73. /* point right for anchors in subs */
  74. .sf-navbar ul .sf-sub-indicator { background-position: -10px -100px; }
  75. .sf-navbar ul a > .sf-sub-indicator { background-position: 0 -100px; }
  76. /* apply hovers to modern browsers */
  77. .sf-navbar ul a:focus > .sf-sub-indicator,
  78. .sf-navbar ul a:hover > .sf-sub-indicator,
  79. .sf-navbar ul a:active > .sf-sub-indicator,
  80. .sf-navbar ul li:hover > a > .sf-sub-indicator,
  81. .sf-navbar ul li.sfHover > a > .sf-sub-indicator {
  82.     background-position: -10px -100px; /* arrow hovers for modern browsers*/
  83. }
  84.  
  85. /*** remove shadow on first submenu ***/
  86. .sf-navbar > li > ul {
  87.     background: transparent;
  88.     padding: 0;
  89.     -moz-border-radius-bottomleft: 0;
  90.     -moz-border-radius-topright: 0;
  91.     -webkit-border-top-right-radius: 0;
  92.     -webkit-border-bottom-left-radius: 0;
  93. }

Paste-bin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.