HTML/CSS Dropdown menu not working on mobile
<p>After finishing the dropdown menu on my desktop, I wanted to see how it worked on mobile. the issue is that on my ipad, the bootstrap panel I have stretches across the screen, so the dropdown get cut off by the panel. I can use a few <code>&lt;br&gt;</code>, but I'm sure there's another way. Can I either stop the panel from stretching, or make the dropdown menu show on top of the panel, rather than under it? On my desktop the panel is on the left side of the screen. How can I make it stay that way?</p>

<p>my html:</p>

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

    &lt;/head&gt;

   &lt;body&gt;



    &lt;div id="nav"&gt;
        &lt;div id="nav_wrapper"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;H&lt;/a&gt;&lt;/li&gt;&lt;li&gt;
                &lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;&lt;li&gt;
                &lt;a href="#"&gt;C&lt;/a&gt;&lt;/li&gt;&lt;li&gt;
                &lt;a href="#"&gt;Tr&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Last 24 hours&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;View All&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Deadliest&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;


    &lt;div class="headerBreak"&gt;

        &lt;/div&gt;

    &lt;div class="recent"&gt;
            &lt;div class="container"&gt;
               &lt;div class="col-md-3"&gt;
                    &lt;div class="panel panel-default"&gt;
                       &lt;div class="headingPanel"&gt;
                         &lt;div class="panel-heading"&gt;&lt;center&gt;&lt;span class="label label-danger"&gt;Recent&lt;/span&gt;&lt;/center&gt;&lt;/div&gt;
                        &lt;div class="panel-heading"&gt;
                            &lt;h3 class="panel-title"&gt;&lt;center&gt;Most     Recent&lt;/center&gt;&lt;/h3&gt;
                        &lt;/div&gt;
                           &lt;/div&gt;



                        &lt;div class="panel-body"&gt;                  
                            &lt;table class="table"&gt;
                            &lt;tr&gt;
                                &lt;th&gt;Date&lt;/th&gt;
                                &lt;th&gt;Location&lt;/th&gt;
                                &lt;th&gt;More Info&lt;/th&gt;

                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;01/28/16&lt;/td&gt;
                                &lt;td&gt;Missouri&lt;/td&gt;
                                &lt;td&gt;&lt;a href="#"&gt;More Info&lt;/a&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/table&gt;

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











    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>My css:</p>

<pre><code>@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;
}
</code></pre>

<p>I realize some of the code isn't properly formatted, as I'm on mobile right now. Apologies for that.</p>