CSS - web page moves when certain areas are clicked

I have set up a Nav Bar in CSS. When I test it live, certain links are fine. When I click on the link that has a submenu, the web page jumps.

/* BEGIN HORIZONTAL DROP-MENU */
nav {
position: relative;
width: 825px; /**adjust width as needed**/
margin: 0 auto;
padding: 0;
text-align: center;
border: 1px dotted blue;
}

nav ul {
margin: 0;
padding: 0
}

nav li {
list-style: none;
font-size: 12px;
float: left;
text-align: center;
}

/**top level menu**/
nav li a {
display: block;
text-decoration: none;
margin-right: 9px; /* space between links */
margin-left: 6px; /* space between links */
width: auto; /* adjust as needed or use auto */
padding: 25px;
font-weight: bold;
line-height: 1.50em;
border: 1px dotted #666;
border-top: none;
color:#FFF;
}

/**alternating background colors**/
nav li:nth-child(odd) > a { background: #6684e0	}
nav li:nth-child(even) > a { background: #e3c384}

/**top menu style on mouse over**/
nav li:hover > a{
color: #FFF;
background: #c0d5db;
}

/**sub-menu**/
nav li ul {
display: none;
text-align: center;
margin: 0;
padding: 0 1em;
background: none;
}

/**sub-menu, help for older IE**/
nav li:hover ul, nav li.hover ul {
display: block;
position: absolute;
padding: 0;
}

nav li:hover li, nav li.hover li { float: none; }

/**drop-menu style**/
nav li:hover li a, nav li.hover li a {
width: 9em; /* adjust width as needed or use auto */
margin-top: 0;
}

/**drop-menu style on mouse over**/
nav li li a:hover {
background:#dc7966;
color: #667edc;
}

/* Clear floated elements at the end*/
nav:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/**END HORIZONTAL DROP-MENUS STYLES**/
-->

</style>

Open in new window

Wanda MarstonCreative DirectorAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alicia St RoseOwner & Principle Developer/DesignerCommented:
Please provide a link to the site.
Wanda MarstonCreative DirectorAuthor Commented:
Prasadh BaapaatWeb Designer & DeveloperCommented:
i don't see the page jumping (a jerk or shake kind of thing) when I click on links...
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Wanda MarstonCreative DirectorAuthor Commented:
It always has for me. I have only tested it in Firefox and I am on a Mac - if that makes any difference.

Thanks.
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Hi wchirnside,
are you on a macbook air or google chromebook? Those devices have short screen heights.
The page will jump if the height of your browser window is short. The jumping is caused by the scrollbar appearing to accomodate the dropdown menu.

On a 17 inch macbookpro. No jumping. When I shrink the browser window I get the jump when the scrollbar appears.

This isn't a bug. Just the way things are. If it bothers you, then give the #wrapper a min height so that the scrollbar is available from the get-go.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Wanda MarstonCreative DirectorAuthor Commented:
Thank you! Didn't think of that but that makes perfect sense.

I am on a small Mac Book Pro so the window is probably too short.

I am trying to get ALL the bugs out of my site - bug by bug - before I go on to the next stage.
Wanda MarstonCreative DirectorAuthor Commented:
Thanks for the quick solution.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.