Databases
StackOverflow2013
Postsdbo
POHover on menu disappears when using background slider with position:fixed and z-index
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHover on menu disappears when using background slider with position:fixed and z-index
    primarykey
    data
    text
    <p>I found out that the hover effect from the main menu disappears if I want to go to the second menu level. Here you find the example:</p> <p><a href="http://bfb.bplaced.net/ie/" rel="noreferrer">http://bfb.bplaced.net/ie/</a></p> <p>HTML:</p> <pre><code>&lt;div id="background-slider"&gt; &lt;a href="http://www.hdwallpapersarena.com/wp-content/uploads/2012/10/Opera-Background-Blue-Swirls.jpg"&gt;&lt;/a&gt; &lt;a href="http://www.hdwallpapersarena.com/wp-content/uploads/2012/10/green-abstract-background.jpg"&gt;&lt;/a&gt; &lt;/div&gt; &lt;div id="menu"&gt; &lt;nav&gt; &lt;ul class="nav-level-1"&gt; &lt;li class="level-1 clearfix"&gt; &lt;a href="unternehmen.html" class="level-1"&gt;Unternehmen&lt;/a&gt; &lt;ul class="nav-level-2"&gt; &lt;li class="level-2"&gt;&lt;a href="/unternehmen/die-firma.html" class="level-2"&gt;Die Firma&lt;/a&gt;&lt;/li&gt; &lt;li class="level-2"&gt;&lt;a href="/unternehmen/das-team.html" class="level-2"&gt;Das Team&lt;/a&gt;&lt;/li&gt; &lt;li class="level-2"&gt;&lt;a href="/unternehmen/allgemeines.html" class="level-2"&gt;Allgemeines&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class="clearer"&gt;&lt;/div&gt; &lt;/nav&gt; &lt;/div&gt; &lt;div id="script-section" class="hidden"&gt; &lt;script src="./js/jquery.superbgimage.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function(){ // Options for SuperBGImage $.fn.superbgimage.options = { transition: 1, speed: 'slow', randomtransition: 0, slideshow: 1, slide_interval: 6000, randomimage: 0 }; // initialize SuperBGImage $('#background-slider').superbgimage().hide; }); &lt;/script&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#menu { position: fixed; z-index: 4; left: 23px; bottom: 40px; } ul.nav-level-1 { float: left; text-align: left; } ul.nav-level-1 li.level-1 { /*float: left;*/ } ul.nav-level-1 li.level-1 a.level-1 { font-family: 'SourceSansProBlack', Arial, sans-serif; font-size: 36px; line-height: 40px; text-transform: uppercase; text-decoration: none; color: #123373; padding: 0 5px; transition: color 0.25s ease 0s, background-color 0.25s ease 0s; float: left; } ul.nav-level-1 li.level-1 a.level-1:hover { text-decoration: none; color: #123373; background-color: #FFF; display: inline-block; } ul.nav-level-1 li:hover a { background-color: #FFF; } ul.nav-level-1 li.level-1:hover ul.nav-level-2 { display: block; } ul.nav-level-2 { display: none; float: left; width: 390px; padding-left: 10px; text-align: left; } ul.nav-level-2 li.level-2 { margin-bottom: 3px; margin-right: 5px; float: left; } ul.nav-level-2 li.level-2 a.level-2{ font-family: 'SourceSansProBold', Arial, sans-serif; font-size: 14px; line-height: 16px; text-transform: uppercase; text-decoration: none; color: #123373; padding: 0 5px; background-color: #FFF; transition: color 0.25s ease 0s, background-color 0.25s ease 0s; } ul.nav-level-2 li.level-2 a.level-2:hover{ background-color: #123373; color: #FFF; } </code></pre> <p>The slider I'm using is called <a href="http://dev.andreaseberhard.de/jquery/superbgimage/" rel="noreferrer">SuperBGImage</a>. <strong>If I remove the slider everything works!</strong></p> <p>I thin it's the z-Index bug of IE but I tried different options by adding <code>position: relative;</code> without success. How do I get the hover effect fixed in IE?</p> <p>I tried this JS code but it doesn't help either:</p> <pre><code>$('li.level-1').hover(function() { $(this).children('ul.nav-level-2').removeClass('hidden'); $(this).children('ul.nav-level-2').addClass('visible'); }); $('ul.nav-level-2').mouseout(function() { $(this).removeClass('visible'); $(this).addClass('hidden'); }); </code></pre> <p>Perhaps it is a float issue. If I remove <code>float: left;</code> than it works better but it is not the design which it should be.</p> <p><strong>Edit:</strong></p> <p><a href="http://www66.zippyshare.com/v/24356058/file.html" rel="noreferrer">Here</a> you can download the project. I noticed another thing. If I start the Internet Explorer he asks me if I want to start the scripts or the Active-X elements. Why does he ask me that? I know it's because the slider but it should be normal Javascript. Perhaps the JS from the slider does something special here ...</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStesting
    1. UStesting
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHover on menu disappears when using background slider with position:fixed and z-index
      1. UStesting
      1. VTBountyStart
    2. VO
      singulars
      1. POHover on menu disappears when using background slider with position:fixed and z-index
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHover on menu disappears when using background slider with position:fixed and z-index
      1. USSean
      1. VTFavorite
    1. COI don't really understand - everything looks OK to me?
      singulars
      1. POHover on menu disappears when using background slider with position:fixed and z-index
      1. USBenM
    2. CO@BenM Issue in IE
      singulars
      1. POHover on menu disappears when using background slider with position:fixed and z-index
      1. USMr. Alien
    3. COSorry, missed the tag.
      singulars
      1. POHover on menu disappears when using background slider with position:fixed and z-index
      1. USBenM
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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