Superfish code comments

/*** Essential styles ***/. sf-menu ,. sf-menu * {/* distance between a level-1 menu and surrounding elements */margin: 0; padding: 0; list-style: none ;}. sf-menu li {position: relative ;}. sf-menu ul {position: absolute; display: none; top: 100%; left: 0; z-index: 99 ;}. sf-menu> li {float: left ;}. sf-menu li: hover> ul ,. sf-menu li. sfHover> ul {display: block ;}. sf-menu a {display: block; position: relative ;}. sf-menu ul {top: 0; left: 95%;/* responsible for Level 3 menu position */}/*** demo skin ***/. sf-menu {float: left; margin-bottom: 0px ;}. sf-menu ul {box-shadow: 2px 2px 6px rgba (0, 0 ,. 2); min-width: 12em;/* allow long menu items to determine submenu width */* width: 12em;/* no auto sub width for IE7, see white-space comment below */}. sf-menu a {border-left: 0px solid # fff; border-top: 0px solid # dFeEFF; /* fallback color must use full shorthand */border-top: 0px solid rgba (255,255,255 ,. 5); padding :. 75em 1em; text-decoration: none; zoom: 1;/* IE7 */}. sf-menu a {color: black;/* font color */}. sf-menu li {background: # D3D3D3;/* set the background color */white-space: nowrap;/* no need for Supersubs plugin */* white-space: normal; /*... unless you support IE7 (let it wrap) */-webkit-transition: background. 1 s; transition: background. 1 s;/* background change time */}. sf-menu ul li {background: # D3D3D3;/* second-level menu background color */}. sf-menu ul li {background: # D3D3D3;/* third-level menu background color */}. sf-menu li: hover ,. sf-menu li. sfHover {background: # CFDEFF;/* color of the sub-menu when the mouse is parked * // * only transition out, not in */-webkit-transition: none ;} /*** arrows (for all rules t IE7 )**/. sf-arrows. sf-with-ul {padding-right: 1.9em;/* top menu triangle arrow left margin from menu text */* padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */}/* styling for both css and generated arrows */. sf-arrows. sf-with-ul: after {content: ''; position: absolute; top: 50%; right: 1em;/* the left and right sides of the menu arrow */margin-top: -3px;/* the upper and lower positions of the triangle arrow in the menu */height: 0; width: 0;/* order of following 3 rules important for fallbacks to work */border: 5px solid transparent;/* the size of the triangle arrow */border-top-color: # dFeEFF;/* edit this to suit design (no rgba in IE8) */border-top-color: rgba (255,255,255 ,. 5 );}. sf-arrows> li>. sf-with-ul: focus: after ,. sf-arrows> li: hover>. sf-with-ul: after ,. sf-arrows>. sfHover>. sf-with-ul: after {border-top-color: white; /* IE8 fallback color * // * color of the primary arrow x/}/* styling for right-facing arrows */. sf-arrows ul. sf-with-ul: after {margin-top:-5px; margin-right:-3px; border-color: transparent; border-left-color: # dFeEFF; /* for the color of the level-1 arrow, edit this to suit design (no rgba in IE8) */border-left-color: rgba (255,255,255 ,. 5 );}. sf-arrows ul li>. sf-with-ul: focus: after ,. sf-arrows ul li: hover>. sf-with-ul: after ,. sf-arrows ul. sfHover>. sf-with-ul: after {border-left-color: white;/* color of the second-level triangle arrow */}