CSS Menu Question

<code> <div class="PageMenu"> <div class="inner"> <div class="CategoryList" id="SideCategoryList"> <h3>Categories</h3> <div class="BlockContent"> <div class="SideCategoryListFlyout"> <ul class="sf-menu sf-horizontal sf-js-enabled"> <li class=""><a href="http://sandbox1.mybigcommerce.com/accessories/" class="hasSub sf-with-ul">Accessories<span class="sf-sub-indicator"> »</span></a><ul style="visibility: hidden; display: none;"> <li><a href="http://sandbox1.mybigcommerce.com/accessories/adapter-kits/">Adapter Kits</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/band-mounting-kits/">Band Mounting Kits</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/bearing-brackets-for-belt-drive-blowers/">Bearing Brackets for Belt Drive Blowers</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/conduit-boxes/">Conduit Boxes</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/drip-shields/">Drip Shields</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/end-shield-kits/">End Shield Kits</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/interchangeable-hubs/">Interchangeable Hubs</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/motor-adjustment-kits/">Motor Adjustment Kits</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/mounting-brackets/">Mounting Brackets</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/rubber-mounting-rings/">Rubber Mounting Rings</a></li>

<li> <a href="http://sandbox1.mybigcommerce.com/accessories/shaft-grounding-rings/" class="hasSub sf-with-ul">Shaft Grounding Rings<span class="sf-sub-indicator"> »</span></a><ul style="display: none; visibility: hidden;"> <li><a href="http://sandbox1.mybigcommerce.com/accessories/shaft-grounding-rings/conductive-epoxy/">Conductive Epoxy</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/shaft-grounding-rings/solid/">Solid</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/shaft-grounding-rings/split/">Split</a></li> </ul> </li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/shafts/">Shafts</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/sleeve-bearing-bracket-kit/">Sleeve Bearing Bracket Kit</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/thrust-collar-kits/">Thrust Collar Kits</a></li> <li><a href="http://sandbox1.mybigcommerce.com/accessories/thrust-sleeve-spacer-kit/">Thrust Sleeve & Spacer Kit</a></li>

</ul> </li> <li class=""><a href="http://sandbox1.mybigcommerce.com/blower-assemblies-and-draft-inducers/" class="hasSub sf-with-ul">Blower Assemblies and Draft Inducers<span class="sf-sub-indicator"> »</span></a><ul style="visibility: hidden; display: none;"> <li class=""><a href="http://sandbox1.mybigcommerce.com/blower-assemblies-and-draft-inducers/general-purpose-centrifugal-blowers/">General Purpose Centrifugal Blowers</a></li>

</ul> </li>

</ul> </li>

</ul>

    </div>

</div>

</div>

        </div>
    </div>

element.style { visibility: hidden; display: none; } sandbox1.mybigcommerce.com/media="all" .PageMenu .sf-menu li ul { z-index: 150 !important; } .PageMenu ul ul { max-height: 450px; width: 580px; top: 5px; -moz-column-count: 2; -moz-column-gap: 10px; -webkit-column-count: 2; -webkit-column-gap: 10px; column-count: 2; column-gap: 10px; background-color: #ffffff; border: 1px solid #333333; } sandbox1.mybigcommerce.com/media="all" .PageMenu li ul { background: #333333; } sandbox1.mybigcommerce.com/media="all" .PageMenu li ul { display: none; position: absolute; z-index: 10; top: 100% !important; width: 250px; left: 0; list-style-image: none; } .sf-menu ul { position: absolute; top: -999em; width: 10em; } sandbox1.mybigcommerce.com/media="all" .PageMenu ul { border-bottom: none; padding: 0; margin: 0; position: relative; display: inline-block; } .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } sandbox1.mybigcommerce.com/media="all" ul { margin: 0 0 20px 20px; } sandbox1.mybigcommerce.com/media="all" ul, ol { margin: 0 0 10px 30px; } sandbox1.mybigcommerce.com/media="all" * { margin: 0; padding: 0; outline: none; } user agent stylesheetol ul, ul ol, ul ul, ol ol { -webkit-margin-before: 0px; -webkit-margin-after: 0px; } user agent stylesheetul ul, ol ul { list-style-type: circle; } user agent stylesheetul, menu, dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } Inherited from .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } user agent stylesheetli { display: list-item; text-align: -webkit-match-parent; } Inherited from .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } user agent stylesheetul, menu, dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } Inherited from sandbox1.mybigcommerce.com/media="all" .PageMenu { font-family: "Lato", Arial, Sans-serif; } Inherited from Style Attribute { cursor: auto; } sandbox1.mybigcommerce.com/media="all" body, .HorizontalFormContainer dd .selector span, .fastCartTop div, .list-icon li { color: #333333; } sandbox1.mybigcommerce.com/media="all" body { background-color: #fff; font-size: 14px; font-family: Arial, Sans-Serif; font-weight: normal; -webkit-text-size-adjust: 100%; } Pseudo ::before element sandbox1.mybigcommerce.com/media="all" .PageMenu li ul:before { border-color: transparent transparent #333333 transparent; } sandbox1.mybigcommerce.com/media="all" .PageMenu li ul:before { content: ' '; position: absolute; width: 0; height: 0; left: 0; margin-left: 10px; top: -18px; border-width: 10px; border-style: solid outset solid solid; } <code>

/r/css Thread