Sub Level Navigation Pushing Remainder Off Page

Bill Sullivan
Bill Sullivan used Ask the Experts™
Hi Experts:
I have a sub-level navigation menu that appears when I hover over the main (horizontal) navigation bar.  However, when I hover over the item, is "pushes" the rest of the main navigation off the page.  I've attached a couple of screen shots to show you what I mean. My question is - how do I have the submenu appear during hover while leaving the rest of the main navigation bar where it is?

This is the CSS I'm using:
ul.sub-level2 {
    display: none;

li:hover .sub-level2 {
    border: #fff solid;
    border-width: 1px;
    display: block;
    left: 75px;
    top: 5px;

ul.sub-level2 li {
    border: none;

Open in new window

Here is how I use it in my code:

<li><a href="/schedules2/viewMonthlySchedule.php">Schedule</a>
            <ul class="sub-level2">
            	<li><a href="/schedules2/viewMonthlySchedule.php">Sales Schedule</a></li>
                <li><a href="/schedules2/viewMonthlySchedule.php">Re-Roof Schedule</a></li>
                <li><a href="/schedules2/viewMonthlySchedule.php">Repair Schedule</a></li>

Open in new window

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
RobOwner (Aidellio)
Most Valuable Expert 2015

A couple of ways to do this:

Have you considered using jQuery UI tabs such as

This allows doesn't affect the top level items but will go off the page to the right:
Top Expert 2013
The problem is that the submenu needs to be absolutely positioned and have a z-index so it displays in a layer above the rest of the page content.

The basic formats for submenus and some optional ideas might help you along.


Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial