Sub Level Navigation Pushing Remainder Off Page

Bill Sullivan
Bill Sullivan used Ask the Experts™
on
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 {
    background:#06C;
    border: #fff solid;
    border-width: 1px;
    display: block;
	position:relative;
    left: 75px;
    top: 5px;
}

ul.sub-level2 li {
    border: none;
    width:150px;
}

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>
             </ul>
            </li>

Open in new window

Screen-Shot-2013-09-05-at-7.27.3.png
Screen-Shot-2013-09-05-at-7.28.5.png
Comment
Watch Question

Do more with

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

Commented:
A couple of ways to do this:

Have you considered using jQuery UI tabs such as http://jsbin.com/AJeJIq/1/edit.

This allows doesn't affect the top level items but will go off the page to the right: http://jsbin.com/ixUVukI/1/edit
Top Expert 2013
Commented:
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.

Cd&

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