如何使CSS悬停菜单保持在最前面

Question

I'm having an issue where on smaller screens the menu goes to two lines and when you want to visit a link on the top line, as you go to a link, it hits the bottom menu and opens that menu instead.

So my question then is, how do I get the menu to stay on top on a smaller screen?

Here is my HTML for the menu:

<nav>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#">Guided Activities</a>
        <ul>
            <li><a href="#">Chapter One</a>
                <ul>
                    <li><a href="GuidedActivity/ChapterOne/html5BasicTemplate_aaa.html">Progressive Enhancement</a></li>
                </ul>
            </li>
            <li><a href="#">Chapter Two</a>
                <ul>
                    <li><a href="GuidedActivity/ChapterTwo/html5BasicTemplate_aaa.html">JavaScript and the Browser</a></li>
                </ul>
            </li>
            <li><a href="#">Chapter Three</a>
                <ul>
                    <li><a href="GuidedActivity/ChapterThree/chpt3GA_aa.html">JavaScript and Math</a></li>
                </ul>
            </li>
            <li><a href="#">Chapter Four</a>
                <ul>
                    <li><a href="GuidedActivity/ChapterFour/chpt4GA1_aa.html">Styles Part 1</a></li>
                    <li><a href="GuidedActivity/ChapterFour/chpt4GA2_aa.html">Styles Part 2</a></li>
                </ul>
            </li>
            <li><a href="#">Chapter Five</a>
                <ul>
                    <li><a href="GuidedActivity/ChapterFive/chpt5GA_aa.html">Arrays</a></li>
                </ul>
            </li>
            <li><a href="#">Chapter Six</a>
                <ul>
                    <li><a href="GuidedActivity/ChapterSix/chpt6GA1_aa.html">Grades</a></li>
                    <li><a href="GuidedActivity/ChapterSix/chpt6GA2_aa.html">Numbers</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Labs</a>
        <ul>
            <li><a href="#">Chapter Three</a>
                <ul>
                    <li><a href="Lab/ChapterThree/ch3lab.html">Strings</a></li>
                </ul>
            </li>
            <li><a href="#">Chapter Four</a>
                <ul>
                    <li><a href="Lab/ChapterFour/ch4lab_aa.html">Tables</a></li>
                </ul>
            </li>
            <li><a href="#">Chapter Five</a>
                <ul>
                    <li><a href="Lab/ChapterFive/chpt5lab_aa.html">Randomness</a></li>
                </ul>
            </li>
            <li><a href="#">Chapter Six</a>
                <ul>
                    <li><a href="Lab/ChapterSix/ch6lab1_aa.html">Even and Odd numbers</a></li>
                    <li><a href="Lab/ChapterSix/ch6lab2_aa.html">Area of a Shape</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Quizzes</a>
        <ul>
            <li><a href="#">Chapter Five</a>
                <ul>
                    <li><a href="Quiz/ChapterFive/ch5quiz_aa.html">Retirement</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Tutorials</a>
        <ul>
            <li><a href="Tutorial/tutorial.html">JavaScript Tutorial</a></li>
        </ul>
    </li>
    <li><a href="#">Reviews</a>
        <ul>
            <li><a href="TableReview/htmlTableReview_aaa.html">Table</a></li>
            <li><a href="FormReview/htmlFormReview_aaa.html">Form</a></li>
        </ul>
    </li>
    <li><a href="#">Class Activities</a>
        <ul>
            <li><a href="/InClass/lotteryNumbers_aa.html">Lottery</a></li>
        </ul>
    </li>
    <li><a href="#">Midterm</a>
        <ul>
            <li><a href="Midterm/Part1/welcome_aa.html">About You</a></li>
            <li><a href="Midterm/Part2/miles_aa.html">Distance</a></li>
            <li><a href="Midterm/Part3/temp_aa.html">Temperature</a></li>
            <li><a href="Midterm/Part4/age_aa.html">Can You Drive Yet?</a></li>
            <li><a href="Midterm/Part5/food_aa.html">Food Idioms</a></li>
            <li><a href="Midterm/Part6/leapYear_aa.html">Is it a Leap Year?</a></li>
        </ul>
    </li>
    <li><a href="#">Fall 2013</a>
        <ul>
            <li><a href="Fall2013/fallindex.html">Fall 2013 Home</a></li>
            <li><a href="Fall2013/Roles/roles.html">Roles</a></li>
            <li><a href="Fall2013/Hobbit/hobbit.html">Hobbit</a></li>
            <li><a href="Fall2013/Final/Index/index.html">Final</a></li>
            <li><a href="Fall2013/Links/links.html">Links</a></li>
        </ul>
    </li>
</ul>
</nav>

And here is the CSS:

   nav {
text-align:center;}

   nav ul ul {
display: none;}

   nav ul li:hover > ul {
display: block;}

   nav ul {
background: #efefef; 
background: linear-gradient(#efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;  
list-style: none;
position: relative;
display: inline-table;}

   nav ul:after {
content: ""; clear: both; display: block;}

   nav ul li {
float: left;}

   nav ul li:hover {
background: #4b545f;
background: linear-gradient(#4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);}

   nav ul li:hover a {
color: #ffffff;}

   nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;}

  /*hover menu*/    
   nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;}

   nav ul ul li {
float: none; 
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;}

   nav ul ul li a {
padding: 5px 20px;
color: #ffffff;}    

   nav ul ul li a:hover {
background: #4b545f;}

   nav ul ul ul {
position: absolute; left: 100%; top:0;}

Here is a link to it when its docked on the side on my screen http://i795.photobucket.com/albums/yy235/jetshadowfire/menubad.png

And a link to it when it is fullscreen http://i795.photobucket.com/albums/yy235/jetshadowfire/menugood.png

Answer 1

It's good that you make your website responsive for devices under the normal wide resolution.

Try adding:

z-index: 100

to your submenu class, this will result that the sub-menu class will go on top of the normal menu instead of underneath.

Answer 2

Easy solution:

CSS:

.staytop {
    position:relative/absolute;
    z-index:999;
}

To use z-index , you must use change the `position property.