Databases
StackOverflow2013
Postsdbo
POneed help with css selectors
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POneed help with css selectors
    text
    copied!<p>I have a menu like so:</p> <pre><code>&lt;div class="header"&gt; &lt;ul class="nav"&gt; &lt;li&gt;&lt;a class="home" href="four80eastfan_home.php"&gt;&lt;img src="Images/home_button.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="albums"&gt;&lt;img src="Images/albums_button.png"&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a class="Album" href="four80eastfan_thealbum.php"&gt;&lt;img src="Images/the_album.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="Nocturnal" href="#"&gt;&lt;img src="Images/nocturnal.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="Round3" href="four80eastfan_round3.php"&gt;&lt;img src="Images/round3.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="EnRoute" href="#"&gt;&lt;img src="Images/en_route.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="RollOn" href="#"&gt;&lt;img src="Images/roll_on.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a class="band"&gt;&lt;img src="Images/band_button.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="members"&gt;&lt;img src="Images/members_button.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>And when I hover over the "Albums" part, the drop-down menu is covered by the content beneath it, which is this:</p> <pre><code>&lt;div class="content_text"&gt; &lt;object width="100%" height="100%"&gt; &lt;param name="movie" value="web/simpleviewer.swf"&gt;&lt;/param&gt; &lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt; &lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt; &lt;param name="bgcolor" value="ffffff"&gt;&lt;/param&gt; &lt;embed src="web/simpleviewer.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%" bgcolor="ffffff"&gt;&lt;/embed&gt; &lt;/object&gt; &lt;/div&gt; </code></pre> <p>relevant CSS:</p> <p>.content_text{ margin-left: 5%; margin-right: 5%; margin-bottom: 5%; margin-top: 5%; background-color: #fff; border: solid 5px; <strong>z-index: -1;</strong> position: relative; }</p> <p>.header{ background-color: #000; position: relative; <strong>z-index: 1;</strong> }</p> <p>I've been trying different things with the z-index property to make the drop-down appear above this content, to no avail. Could it be the flash app that's causing the problem? Please help a noob out.</p> <p>Cheers,</p> <p>Matt</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