Question

我遇到的问题是，在较小的屏幕上，菜单会转到两行，当您想要访问顶行的链接时，当您转到链接时，它会点击底部菜单并打开该菜单。

所以我的问题是，如何让菜单在较小的屏幕上保持最佳状态？

这是我的菜单HTML：

<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>

这是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;}

当它停靠在屏幕的一侧时，这是一个指向它的链接 http://i795.photobucket.com/albums/yy235/jetshadowfire/menubad.png

全屏时链接到它 http://i795.photobucket.com/albums/yy235/jetshadowfire/menugood.png

Answer 1

让您的网站对正常广泛分辨率下的设备做出响应非常好。

尝试添加：

z-index: 100

到您的子菜单类，这将导致子菜单类将在普通菜单上而不是在下面。

Answer 2

简易解决方案：

CSS：

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

要使用z-index，您必须使用更改`position属性。

如何让CSS悬停菜单保持最佳状态

2 个答案:

CSS：