Member Avatar for rb1234567

I am having trouble getting my drop down navigation menu to work. The main issue is when I zoom out in Google Chrome, the menu starts wrapping and dropping to a 2nd line, causing all other divs on the page to wrap too.

I have searched across the internet to find a solution but nothing seems to work. Thanks for your advice.

Html:

<div id="nav">
   <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Quality</a></li>
   <li><a href="#">Processes</a></li>
   <li><a href="#">Markets</a></li>
   </ul>
   <ul>
   <li><a href="#">Products</a>
   <ul>
   <li><a href="#">Product information</a></li>
   <li><a href="#">Product number one submenu</a></li>
   <li><a href="#">Product number two submenu</a></li>
   <li><a href="#">Product 3</a></li>
   <li><a href="#">Product 4</a></li>
   <li><a href="#">Product num 5</a></li>
   <li><a href="#">Products 6, more & products</a></li>
   <li><a href="#">Prod numb Seven</a></li>
   <li><a href="#">More products eight</a></li>
   <li><a href="#">More prods, prods and products</a></li>
   <li><a href="#">prod Stock List</a></li>
   </ul>
    </li>
    </ul>
    <ul>
   <li><a href="#">News</a>
   <ul>
   <li><a href="#">Latest news</a></li>
   <li><a href="#">Case Studies</a></li>
   <li><a href="#">Testimonials</a></li>
   </ul>
   </li>
   </ul>
   <ul>
   <li><a href="#">Contact</a>
   <ul>
   <li><a href="#">Contact us</a></li>
    <li><a href="#">Directions</a></li>
   </ul>
   </li>
  </ul>
  </div>

css:

 #nav {
background-color:#14c64a;
height:37px;
width:960px;
}

   #nav ul {
   font-family: Arial, Verdana;
   font-size: 14px;
   margin: 0;
      padding: 0;
    list-style: none;
white-space:nowrap;
    }

    #nav ul li {
        display: block;
        position: relative;
       float: left;
     }

    #nav li ul {
    display: none;
    }

    #nav ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 5px 15px 5px 15px;
    background: #14c64a;
    margin-left: 1px;
    white-space: nowrap;
line-height:27px;
}

#nav ul li a:hover {
background: #666;
}

#nav li:hover ul {
display: block;
position: absolute;
}

#nav li:hover li {
float: none;
font-size: 11px;
}

#nav li:hover a { background: #14c64a; }

#nav li:hover li a:hover {
    background: #1e7c9a;
}

This a fiddle someone created for me to help you test my code instantly.
http://jsfiddle.net/MrLister/Sm42N/

  • 3 Contributors
  • 2 Replies
  • 312 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

reported the nav wrapping to a second line when zooming in Chrome, while and could not reproduce it. That pattern points to an environment-dependent layout problem: fractional‑pixel rounding at non‑integer zoom levels (browser zoom, OS scaling, different font rendering) can make the total width of floated items — padding + borders + separators — exceed a fixed container width, which forces the last item down.

A robust, future‑proof fix is to stop relying on floated list items and use flexbox for the top-level list so items never wrap:

/* switch top-level list to flex to prevent wrapping */
#nav > ul {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  list-style: none;
}
#nav > ul > li { float: none; }
#nav a { display: block; padding: 6px 14px; white-space: nowrap; }

If flexbox cannot be used, reduce the chance of cumulative overflow: remove small per-item margins (they add up), replace them with a border-left or box-shadow separator inside the anchor, and set box-sizing: border-box so padding is included in width calculations. Avoid a rigid fixed width on the container if the layout must tolerate zooming; alternatively allow horizontal overflow (overflow-x: auto) so items do not wrap.

Quick troubleshooting checklist that matches the symptoms and reported:

  • Reproduce using exact zoom levels (e.g., 90%, 110%) and note differences.
  • Inspect computed widths in DevTools — if the sum of items > container, wrapping will occur.
  • Temporarily highlight each list item (background or outline) to see which element overflows.
  • Simplify markup to a single UL with LIs to reduce unexpected spacing from multiple sibling ULs.

Switching to flexbox or eliminating cumulative separators normally eliminates the wrap caused by subpixel rounding at different zooms.

Recommended Answers

All 2 Replies

Member Avatar for Member #46692

Seems ok to me...

Member Avatar for JorgeM

It looked Ok to me as well, unless I'm not understanding what you mean by zoom. I changed the "zoom" settings on my browser and also adjusted the size of the browser window. Didnt see any issues with regard to wrapping.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.