Question

完成桌面上的下拉菜单后，我想看看它在移动设备上是如何工作的。问题是在我的ipad上，我在屏幕上延伸了自举面板，因此面板下拉了下拉菜单。我可以使用一些<br>，但我确信还有另一种方法。我可以阻止面板拉伸，还是让下拉菜单显示在面板顶部而不是下面？在我的桌面上，面板位于屏幕的左侧。我怎样才能让它保持这种状态？

我的HTML：

    <!DOCTYPE html>
<html>
    <head>
      <title>| Home</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet"               href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.cs  s"
 integrity="sha384-    1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"     crossorigin="anonymous" />

    </head>

   <body>



    <div id="nav">
        <div id="nav_wrapper">
            <ul>
                <li><a href="#">H</a></li><li>
                <a href="#">A</a></li><li>
                <a href="#">C</a></li><li>
                <a href="#">Tr</a>
                    <ul>
                        <li><a href="#">Last 24 hours</a></li>
                        <li><a href="#">View All</a></li>
                        <li><a href="#">Deadliest</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>


    <div class="headerBreak">

        </div>

    <div class="recent">
            <div class="container">
               <div class="col-md-3">
                    <div class="panel panel-default">
                       <div class="headingPanel">
                         <div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
                        <div class="panel-heading">
                            <h3 class="panel-title"><center>Most     Recent</center></h3>
                        </div>
                           </div>



                        <div class="panel-body">                  
                            <table class="table">
                            <tr>
                                <th>Date</th>
                                <th>Location</th>
                                <th>More Info</th>

                            </tr>
                            <tr>
                                <td>01/28/16</td>
                                <td>Missouri</td>
                                <td><a href="#">More Info</a></td>
                            </tr>
                        </table>

                            <center><input type="button" value="View all" onClick="#" class="btn btn-default"></center>
                            <center><input type="button" value="Last 24 hours" onClick="#" class="btn btn-default"></center>
                            <center><input type="button" value="Last      48 hours" onClick="#" class="btn btn-default"></center> 
                        </div>
                        <div class="panelFooter">
                                <p>Last Updated: 01/28/16</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>











    </body>
</html>

我的css：

@charset "utf-8";
body 
{
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    font-size: 14px;
}

/* Navigation */

#nav
{
    background-color: #222;
}

#nav_wrapper
{
    width: 960px;
    margin: 0 auto;
    text-align: left;
}


#nav ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
}

#nav ul li
{
    display: inline-block;
}

#nav ul li:hover
{
    background-color: #333;
}

#nav ul li a,visited
{
    color: #ccc;
    display: block;
    padding: 15px;
    text-decoration: none;
}

#nav ul li a:hover
{
    color: #ccc;
    text-decoration: none;
}

#nav ul ul li
{
    display: block;
}

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

#nav ul ul
{
    display: none;
    position: absolute;
    background-color: #333;
}

#nav ul ul li
{
    display: block;
}

#nav ul ul li a,visited
{
    color: #ccc;
}

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






/*
.headerBreak
{
    width: 100%;
    height: 0;
    margin-top: -125px;
    border-bottom: 3px solid #a7e0ee;
}
*/

 .recent 
{
    margin-top: 50px;
    float: left;


}

.recent input
{
    float: left;
    margin: 0 5px;
}


.panel-body
{
    background-color: white;
}

.panel-heading
{
    background-color: #999;
    color: #337ab7;
}

.panelFooter
{
    float: left;
}

我意识到某些代码格式不正确，因为我现在正在使用移动设备。为此道歉。

Answer 1

我使用z-index执行以下操作，使得下拉到面板上方：

#nav ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    position: relative;
    z-index: 1; /* This was added to your code */
}

z-index属性指定元素的堆栈顺序。

堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。通过W3C学校

HTML / CSS下拉菜单无法在移动设备上运行

1 个答案: