0

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
9
Views
3 Years
Discussion Span
Last Post by JorgeM
1

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.