Nav Drop Down

Hi when I rollover my “Products” link in my navbar my drop down does not show… not sure what is causing the problem…

<div class="nav">
                <ul id="jsddm">
                    <li><a href="/default.aspx">HOME</a></li>
                    <li><a href="/ABOUTUS.aspx">ABOUT US</a></li>
                    <li><a href="/Products.aspx">PRODUCTS</a>
                        <ul>
							<li><a href="/ShockLabels.aspx">Shock Indicator Labels</a></li>
							<li><a href="/Tilt_Indicator.aspx">Tilt Indicator Label</a></li>
							<li><a href="/Protect_A_Pak.aspx">Protect-A-Pak</a></li>
                            <li><a href="/Omni_G.aspx">Omni-G</a></li>
                            <li><a href="/shock_fuse.aspx">Shock Fuse</a></li>
							<li><a href="/transmonitor.aspx">Trans-Monitor</a></li>
                            <li><a href="/transmonitor_td.aspx">Trans-Monitor TD</a></li>
							<li><a href="/Impact-O-Graph.aspx">Impact-O-Graph</a></li>
                            <li><a href="/DIGI-SHOCK.aspx">Digi-Shock</a></li>
				       </ul>
                    </li>
                    <li><a href="/CONTACT2.aspx">CONTACT US</a></li>
                </ul>
            </div>

Your .header element has overflow:hidden; set on it. This was set to contain the floated elements. Remove it.

You’ll want to add in the clearfix instead. Modify the header element and add class=“clearfix”

Then add this in. Now you have a reusable way to clear and contain floats if overflow:hidden; causes any more issues.

.clearfix::after
{
  content: " "; 
  display: table; 
}
 .clearfix::before
{
  clear: both;
}

hmm I removed it and added that ^ and everything went off…

Update the page please.

Ok did it again.

Add clear:both to my clearfix::after{} rule.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.