Sub Level Navigation Pushing Remainder Off Page

Posted on 2013-09-05
Medium Priority
Last Modified: 2013-09-06
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

Question by:sully1958
LVL 43

Expert Comment

ID: 39469297
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
LVL 53

Accepted Solution

COBOLdinosaur earned 2000 total points
ID: 39470642
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.


Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question