CSS   16

superfish navbar css

Guest on 17th July 2022 05:30:17 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. }

Raw Paste


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