Databases
StackOverflow2013
Postsdbo
PODrop down menu cuts off or appears behind div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODrop down menu cuts off or appears behind div
    text
    copied!<p>I have a drop down menu which is appearing behind my image transition gallery div. Below is the image of what it looks like and the HTML and CSS for it.</p> <p><img src="https://i.stack.imgur.com/brHoi.jpg" alt="enter image description here"></p> <p>HTML:</p> <pre><code>&lt;body&gt; &lt;div id="top_bar"&gt; &lt;div id="top_inner"&gt; &lt;div id="logo"&gt; &lt;a href="http://www.edosbornephotography.com"&gt;&lt;img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="nav"&gt; &lt;ul class = "menu" &gt; &lt;li&gt; &lt;a href = "#" &gt; Home &lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href = "#" &gt; Packages &lt;/a&gt; &lt;li&gt;&lt;a href = "#" &gt; Weddings &lt;/a&gt; &lt;li&gt;&lt;a href = "#" id="left" &gt; Lifestyle &lt;/a&gt; &lt;ul class = "submenu" &gt; &lt;li&gt; &lt;a href = "#" &gt; Families &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href = "#"&gt; Newborn/Child &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href = "#" &gt; Portraits &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href = "#" &gt; Blog &lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href = "#" id="left"&gt; Abous Us &lt;/a&gt; &lt;ul class = "submenu" &gt; &lt;li&gt; &lt;a href = "#" &gt; Ed Osborne &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href = "#" &gt; Testimonials &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href = "#" &gt; FAQs &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href = "#" &gt; Contact Us &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href = "#" &gt; Links &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="main"&gt; &lt;div id="smart-gallery"&gt; &lt;a href="images/cubagallery-img-1.jpg"&gt; &lt;img src="images/cubagallery-img-1.jpg" /&gt;&lt;/a&gt; &lt;a href="images/cubagallery-img-15.jpg"&gt; &lt;img src="images/cubagallery-img-15.jpg" /&gt;&lt;/a&gt; &lt;a href="images/cubagallery-img-3.jpg"&gt; &lt;img src="images/cubagallery-img-3.jpg" /&gt;&lt;/a&gt; &lt;a href="images/cubagallery-img-4.jpg"&gt;&lt;/a&gt; &lt;img src="images/cubagallery-img-4.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.min-gallery { width: 927px; height: 615px; border: solid 1px black; background-color: Black; background: url(../images/bg.jpg); margin: auto; margin-left: 232px; } .min-gallery .preview { width: 852px; height: 493px; margin-top: 36px; margin-left: 36px; margin-right: 36px; position: relative; border: solid 2px black; overflow: hidden; background-color: White; } .min-gallery .preview img { /* width: 795px; height: 525px;*/ position: absolute; } .min-gallery .bottom { width: 100%; height: 98px; color: Gray; font-family: Arial; font-size: 1em; font-weight: bold; overflow: hidden; } #top_bar { width: 100%; height: 145px; background: #000000; padding-bottom: 20px; } #top_inner { text-align: center; margin: 0 auto; width: 1000px; height: 144px; } .nav { margin: 0 auto; position: relative; padding-top: 100px; } ul.menu { list-style: none; margin: 0; float: left; background: #222; font-size: 1.2em; background: url(../images/topnav_bg.gif) repeat-x; } ul.menu li { float: left; margin: 0; position: relative; } ul.menu li a{ padding: 10px 18px; color: #fff; display: block; text-decoration: none; float: left; } ul.menu li a#left{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.menu li a:hover { background: url(../images/topnav_hover.gif) no-repeat center top; } ul.menu li span { width: 11px; height: 35px; float: left; background: url(../images/subnav_btn.gif) no-repeat center top; } ul.menu li span.subhover { background-position: center bottom; cursor: pointer; } ul.menu li ul.submenu { list-style: none; position: absolute; left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; } ul.menu li ul.submenu li{ margin: 0; padding: 0; border-top: 1px solid #252525; border-bottom: 1px solid #444; clear: both; width: 170px; } html ul.menu li ul.submenu li a { float: left; width: 122px; padding-left: 30px; text-align: left; } </code></pre> <p>When I remove position:absolute from .min-gallery .preview img, the drop down menu appears on top which is how I want it but the images do stop changing and just stick on one image.</p> <p>Anyone got a quick fix? Sorry about the pasting of all the code but I dont know how else I can express my point to you guys</p> <p>Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload